这是我参与「第五届青训营」笔记创作活动的第7天

一、本堂课重点内容：

介绍Next.js项目搭建、Next.js如何编写程序、Next.js任何使用。

二、详细知识点介绍：

1.项目搭建

方法一：手动搭建

创建一个文件夹
运行指令：npm init 进行初始化
安装react、react-dom、next指令：npm i -save react react-dom next
文件夹内新建pages文件夹
pages文件夹下新建index.js文件
index.js中写

export default () => (
<h1>Hello</h1>
)
}

终端输入指令：npm run dev 运行项目

方法二：自动搭建

输入指令：npm i -g craete-next-app 安装脚手架工具
进入指定文件夹下创建项目
输入指令：npx craete-next-app xxx 创建项目（xxx为next.js项目名称可修改）

2.文件说明

components

用来存放组件

pages

用来存放页面，因为next.js会自动创建路由，所以在pages中一个js文件就可以看做一个页面。

比如在pages创建一个xxx.js，则运行后url拼接上/xxx就可以看到xxx.js运行后的页面；

如果pages下创建一个文件夹aaa，文件夹aaa下再创建bbb.js，则需要在地址栏拼接/aaa/bbb才能看见bbb.js对应的页面；

而根据id或者其他数据的动态页面则需要这样命名js文件如[id].js,地址栏拼接/1223213就能访问这个根据id的页面了

3.路由的标签跳转和编程跳转

路由标签跳转：

引入Link标签：import Link from "next/Link"
比如去aaa页面<Link herf="/aaa"><a>去aaa页面</a></Link>这里的a标签不是固定的
注意Link标签下面只能有一个父级标签，拿上面的例子来说，就是不能再有一个a标签同级的标签，但是a标签里面可以写其他多个标签。

编程跳转：

引入Router：import Router from "next/router"
通过一个方法执行：Router.push("/aaa")就可以跳转了

4.路由跳转使用query方式传递参数和接收参数

query方式传递参数：

方式一：<Link href="/aaa?name=小明"><a>我是小明</a></Link>
方式二：Router.push("/aaa?name=小明")
方式三：Router.push({path:"/aaa",query:{name:"小明"}})
方式四<Link href={{pathname:"/aaa",query:{name:"小明"}}}><a>我是小明</a></Link>

接收query参数：

导入withRouterimport {withRouter} from "next/router"
代码示例：

import {withRouter} from "next/router
import Link from "next/Link"

const aaa = ({router}) => (<h1>我是{router.query.name}</h1>)

export default withRouter(aaa)

5.路由的6个钩子事件

routerChangeStart:路由将要变化时触发
routerChangeComplete:路由发生变化之后触发
beforeHistoryChange:在history路由模式下路由发生变化之前触发
routerChangeError:路由变化出现错误时触发
hashChangeStart：hash路由模式下，路由变化之前触发
hashChangeComplete：hash路模式下，路由变化之后触发

使用示例

Router.event.on("routerChangeStart",(...args) => {
console.log("我执行了",...args)
})

hash路由跳转示例：

<link href="#aaa"><a>我是hash路由跳转的</a></Link>

6.在getInitialProps中使用Axios获取远端数据

在next中请求数据只允许写在getInitialProps方法中,方法需要有返回值

代码示例：

import axios from 'axios'

const aaa = (data) => {
return (
<p>{data}</p>
)
}

aaa.getInitialProps = async () => {
const promist = new Promise((resolve) => {
axios("https://xxx").then(res => {
resolve(res.data)
})
})
return await promise
}

exprot default aaa

其中data就是getInitialProps方法的返回值，如果也使用了withRouter则，方法返回值为第二个参数，如 const aaa = (router,data) => (<p>{router.query.name}+{data}</p>)

7.使用Style JSX编写页面CSS样式

代码示例

const aaa = () => {
return (
<>
<div>xxx</div>
<style jsx>
{
`
div{color:red}
`
}
</style>
</>
)
}

8.LazyLoading实现模块懒加载

所谓懒加载就是需要时再加载代码示例

import dynamic from "next/dynamic"

const b = dynamic(import "../components/b")

这样就对b组件实现了懒加载

9.自定义Head更加友好的SEO操作

引入head：import Head from "next/head"
在return ()中使用，如<Head><text>哈哈哈</text></Head>

10.Next.js项目中使用AntDesignUI

安装Antd
next.js项目下新建next.config.js文件
next.config.js文件配置如下：（注意配置完重启项目才会生效）

const withCss = require('@zeit/next.css')

if(typeof require !== "undefined"){
require.extensions[".css"] = file => {}
}

module.exprots = withCss({})

4.使用babel实现按需加载(可选)，安装指令：yarn add babel-plugin-import 5.根目录下新建.babelrc文件，文件内容（注意配置完重启项目才会生效）

QQ浏览器截图20230212174224.png

6.引入使用：import {Button} from "antd"

11.Next.js打包的坑

如果向上一步那样使用了antd的按需加载，则使用指令npm run build打包会报错。

解决办法：全局引入antd

.babelrc文件中删除"style":"css"
在pages文件夹中新建_app.js文件
_app.js文件内容如下

import App from "next/app"
import "antd/dist/antd.css"

export default App

三、课后个人总结：

通过对本次课程的学习让我对next.js项目有了大致的了解，让我对next.js项目的开发有了基本的上手能力，能够简单的开发一些next.js项目。

四、引用参考：

# React服务端渲染框架Next.js入门教程

Next.js项目|青训营笔记