新版 Next.js 从入门到入土

本教程用的Next.js 是 13 版本

Next.js 简介

1. 完善的React项目，搭建轻松
2. 自带数据同步，解决服务端渲染最大难点
3. 丰富的插件
4. 灵活配置

创建第一个项目

手动创建

初始化

npm init

安装所需要的依赖包

npm install --save react react-don next

增加快捷命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "next","build": "next build","start": "next start"},

创建测试文件

在根目录下创建pages文件夹，并在该文件下创建 index.js

pages 文件夹是Next 规定的，在这个文件夹下写入的文件，Next.js 会自动创建对应的路由

function Index() {return (<div>Halo Next.js</div>)
}export default Index

运行 npm run dev

creact-next-app 脚手架创建Next.js 项目

创建项目

npx create-next-app@latest

第一次创建项目，若没有安装nextjs 会提示是否安装

What is your project named? my-app                              // 项目名
Would you like to use TypeScript? No / Yes                      // TypeScript 
Would you like to use ESLint? No / Yes                          // ESLint
Would you like to use Tailwind CSS? No / Yes                    // Tailwind CSS
Would you like to use `src/` directory? No / Yes                // src 作为根目录
Would you like to use App Router? (recommended) No / Yes        // 路由
Would you like to customize the default import alias? No / Yes  // 自定义默认导入别名
What import alias would you like configured? @/*                // 配置什么导入别名

运行 npm run dev

Next.js 的page和component

创建一个新的页面

在page目录下创建 about.js

function About () {return (<div>About nextjs</div>)
}export default About

访问 http://localhost:3000/about

在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）

创建二级目录页面

在page目录下创建 home 文件 并在该文件下创建 home.js

function Home () {return (<div>home nextjs</div>)
}export default Home

访问 http://localhost:3000/home/home

Component组件的制作

创建组件

在src目录下创建 components 目录，并在该目录下创建 buttonComponent.js 文件

export default ({children})=><button>{children}</button>

引用

在home.js 引入

import dynamic from 'next/dynamic'const ButtonComponent = dynamic(() => import('@/components/buttonComponent'),
// { ssr: false }  // 是否关闭 ssr（服务端渲染） 默认是开启
)

使用

<ButtonComponent>按钮</ButtonComponent>

路由

标签式跳转

在home页面新增两个页面

homeA.js

import React from "react";
import Link from "next/link";const HomeA = () => {return (<><div>我是HomeA 页面</div><div><Link href="/home/home"><div>去Home页面</div></Link></div></>)
}export default HomeA

homeB.js

import React from "react";
import Link from "next/link";const HomeB = () => {return (<><div>我是HomeB 页面</div><div><Link href="/home/home"><div>去Home页面</div></Link></div></>)
}export default HomeB

修改home页面内容

import React from "react"
import Link from "next/link"function Home () {return (<div><div>home nextjs</div><div><Link href="/home/homeA"><div>去homeA页面</div></Link></div><div><Link href="/home/homeB"><div>去homeB页面</div></Link></div></div>)
}export default Home

早期版本 Link标签下是要接上a标签的，当前版本（13.4.19）如果加上a标签会报错

Router模块进行跳转（编程式跳转）

修改home.js页面

import React from "react"
import Router from "next/router"const goHomeA = () => {Router.push('/home/homeA')
}const goHomeB = () => {Router.push('/home/homeB')
}function Home () {return (<div><div>home nextjs</div><div onClick={goHomeA}>去homeA页面</div><div onClick={goHomeB}>去homeB页面</div></div>)
}export default Home

传参与接收

Next.js 只能通过 query 来传递参数

标签式

修改home.js页面

import React from "react"
import Link from "next/link"function Home () {return (<div><div>home nextjs</div><div><Link href="/home/homeA?name=张三&age=18"><div>张三</div></Link></div><div><Link href="/home/homeA?name=李四&age=20"><div>李四</div></Link></div></div>)
}export default Home

修改homeA.js页面

withRouter 是 Next.js 框架的高级组件，用来处理路由用的

import React from "react";
import Link from "next/link";
import { withRouter } from "next/router";function Home () {return (<div><div>home nextjs</div><div><Link href="/home/homeA?name=张三&age=18"><div>写法一</div></Link></div><div><Link href={{pathname: '/home/homeA',query: {name: '李四',age: 20}}}><div>写法二</div></Link></div></div>)
}export default withRouter(HomeA)

编程式

import React from "react"
import Router from "next/router"const goHomeA = () => {Router.push('/home/homeA?name=张三&age=18')
}const goHomeA2 = () => {Router.push({pathname: '/home/homeA',query: {name: '李四',age: 20}})
}function Home () {return (<div><div>home nextjs</div><div onClick={goHomeA}>写法一</div><div onClick={goHomeA2}>写法二</div></div>)
}export default Home

钩子函数

History

import React from "react"
import Router from "next/router"Router.events.on('routeChangeStart', (...args) => {console.log('routeChangeStart -> 路由开始变化', ...args)
})Router.events.on('routeChangeComplete', (...args) => {console.log('routeChangeComplete -> 路由结束变化', ...args)
})Router.events.on("beforeHistoryChange", (...args) => {console.log('beforeHistoryChange -> 在改变浏览器 history 之前触发', ...args)
})Router.events.on('routeChangeError', (...args) => {console.log('routeChangeError -> 跳转发生错误', ...args)
})const goHomeA = () => {Router.push('/home/homeA?name=张三&age=18')
}const goHomeA2 = () => {Router.push({pathname: '/home/homeA',query: {name: '李四',age: 20}})
}function Home () {return (<div><div>home nextjs</div><div onClick={goHomeA}>写法一</div><div onClick={goHomeA2}>写法二</div></div>)
}export default Home

Hash

Router.events.on('hashChangeStart', (...args) => {console.log('hashChangeStart -> 路由开始变化', ...args)
})Router.events.on('hashChangeComplete', (...args) => {console.log('hashChangeComplete -> 路由结束变化', ...args)
})

在getInitialProps中获取远端数据

getInitialProps 是挂在 React 组件上的静态方法

如果你使用的是 Next.js 9.3 或更高版本，我们建议你使用 getStaticProps 或 getServerSideProps 来替代 getInitialProps。

官方推荐的是fetch

fetch 请求

在page目录新建一个request.js 页面

import { withRouter } from "next/router";function Request ({router, data}) {return (<><div>{router.name}</div><div>请求页面 {data} </div></>)
}Request.getInitialProps = async () => {const res = await fetch('https://api.github.com/repos/vercel/next.js')const json = await res.json()console.log(json)return { stars: json.stargazers_count }
}export default withRouter(Request)

index.js

import Router from "next/router"const goRequest = () => {Router.push({pathname: '/request',query: {name: '李四',age: 20}})  
}export default function Home() {return (<><div>首页</div><div onClick={goRequest}>去Request页面</div></>)
}

运行页面，可以发现，getInitialProps 会在服务端渲染时执行，也会在客户端渲染时执行

1. 当页面通过页面刷新等直接形式访问时，会触发 Nextjs 使用服务端渲染的方式返回页面数据

此时 getInitialProps 会在服务端执行，浏览器端不会执行

2. 当页面通过浏览器端路由跳转的形式访问时（如浏览器前进后退），该页面渲染不会触发 Nextjs 服务端渲染

所以实际上 getInitialProps 方法会根据当前页面渲染时的端侧不同，自主地选择在 Node 端还是 Client 端执行

getStaticProps

getStaticProps 会在每次页面访问时被请求

修改request.js

import { withRouter } from "next/router";function Request ({router, content}) {return (<><div>{router.name}</div><div>请求页面 {content} </div></>)
}export const getStaticProps = async () => {const res = await fetch('https://api.github.com/repos/vercel/next.js')const json = await res.json()console.log(json)return {props: {content: json.stargazers_count}};
};export default withRouter(Request)

getStaticProps是用于在构建时预先执行getInitialProps进行的处理并预先生成静态文件的API。 不会在客户端上运行。 始终在服务器端运行。

getServerSideProps

import { withRouter } from "next/router";function Request ({router, content}) {return (<><div>{router.name}</div><div>请求页面 {content} </div></>)
}export const getServerSideProps = async context => {const res = await fetch('https://api.github.com/repos/vercel/next.js')// if (!res) {// notFound 强制页面跳转到 404// return {//     notFound: true// };// redirect 来将页面重定向// return {//     redirect: {//         destination: '/',//         permanent: false//     }// };// }const json = await res.json()console.log(json)return {props: {content: json.stargazers_count}};
}export default withRouter(Request)

通过 next.js 的 getServerSideProps，我们在开发中可以很好的协调前后端数据，一些页面初始化数据、页面鉴权可以直接在 getServerSideProps 中进行处理，这样可以大大简化页面逻辑，还保障前后端的统一性。

JSX 编写页面的CSS样式

基础写法

新建style.js 页面

const Style = () => {return (<><div>style 页面</div><div className="base">基础</div><style jsx>{`.base {color: blue;font-size: 16px;margin: 40px;display: block;}`}</style></>)
}export default Style

要注意，style 后面要jsx next.js 会自动加入一个随机类名，这样就防止CSS的全局污染，如上述代码 base 会变成 base-xxxxxx

动态样式

修改style.js 页面

import React, {useState} from "react"const Style = () => {const [color, setColor] = useState('blue')const [fontSize, setFontSize] = useState('16')const [margin, setMargin] = useState('40')const changeColor = () => {setColor(color === 'blue' ? 'red': 'blue')}const changeFontSize = () => {setFontSize(fontSize === '16' ? '20': '16')}const changeMargin = () => {setMargin(margin  === '10' ? '40': '10')}return (<><div>style 页面</div><div className="base">基础</div><button onClick={changeColor}>改颜色</button><button onClick={changeFontSize}>改字体大小</button><button onClick={changeMargin}>改边距</button><style jsx>{`.base {color: ${color};font-size: ${fontSize}px;margin: ${margin}px;display: block;}`}</style></>)
}export default Style

模块懒加载

新建 import.js 页面

引入 dayjs 库

npm i dayjs

如果我们在页面直接引入，那它就会以公共库的形式进行打包发布，就算项目第一个页面不使用moment也会进行加载，这就是资源浪费

懒加载引入的第三方库

import.js

import React,{useState} from "react";const Import = () => {const [time, setTime] = useState()const changeTime = async () => {const dayjs = await import('dayjs')        setTime(dayjs.default(Date.now()).format('YYYY-MM-DD HH:mm:ss'))}return (<><div>import 页面</div><div>当前时间为：{time}</div><button onClick={changeTime}>获取当前时间</button></>)
}export default Import

可以看到我们是在需要的地方才引入

要注意 使用 default 才能生效

懒加载组件

利用 dynamic 引入组件实现

import dynamic from 'next/dynamic'const ButtonComponent = dynamic(() => import('@/components/buttonComponent'))const Import = () => {return (<><div>import 页面</div><ButtonComponent>按钮</ButtonComponent></>)
}export default Import

自定义组件是懒加载的，只有在jsx里用到<ButtonComponent/>时，才会被加载进来，如果不使用就不会被加载

head 组件

那为了更好的进行SEO优化，可以自己定制<Head>标签

创建header.js页面

Next.js已经把<Head>封装好了，本身就是一个组件，可以直接

import Head from 'next/head'const Header = ()=>{return (<><Head><title> 头部 </title>   </Head></>)
}export default Header

Next.js框架下使用Ant Design UI

Ant Design是一款阿里开源的前端组件库

从React的角度来讲，它就是一个组件库，里边封装了开发中最常用的一些组件，让我们可以通过简单的配置就可以使用他们

让Next.js 支持引入CSS文件

首先创建一个 pages/_app.js（如果不存在的话）。 然后import 该 styles.css 文件。

样式表的全局特性

旧版本可以通过 @zeit/next-sass 支持css，这个在新版本中已移除

Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块

CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名，而不必担心冲突。

此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入（import）到应用程序中的任何位置

不加module next.js框架会误以为是全局样式，会引发冲突报错

import styles from '@/styles/test.module.css'const Ant = () => {return (<><div>Ant 页面</div><p className={styles.default}>测试</p></>)
}export default Ant

支持scss

安装scss

npm install sass

用法与 css一致

import styles from '@/styles/test.module.scss'const Ant = () => {return (<><div>Ant 页面</div><p className={styles.default}>测试</p></>)
}export default Ant

安装 ant

npm install antd --save

引入 ant 并使用

新建react.js 页面

import React from 'react';
import { DatePicker } from 'antd';const App = () => {return <DatePicker />;
};export default App;

babel

为了不让webpack 把整个Ant Design的包都进行打包到生产环境

我们需要你用到 babel

npm install --save babel-plugin-import

在项目根目录建立.babelrc文件

{"presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置"plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS["import",{"libraryName":"antd"}]]
}

这样我们使用那个组件就打包那个组件,同样CSS也是按需打包的

Next.js生产环境打包

配置package.json 文件夹

"start": "next start -p 8088" 

运行打包

npm run build

运行打包好的文件

npm run start