作为基于react.js的全栈框架next.js在现在不可谓不热门，我个人也上手用了一段时间，体验上面来说还是不错的。所以在这里，给大家分享一下next.js的入手指南！
如果有理解不到位的地方，还请指正！
基本介绍
该篇落简单介绍next.js是什么，和react.js的关系，以及怎么创建一个next.js的项目。
认识next.js
这一篇落，我们来认识一下什么是next.js，为什么要使用它来进行开发。
与react.js的关系
首先，我们要了解next.js这个框架，就要知道一个点，那就是next.js是基于react.js之上构建的一个全栈框架，也可以说是react.js的框架。
并且，在react.js的基础上，next.js增加了更多的附加功能和其他优化。
为什么要使用next.js
既然next.js也是基于react.js的，那为啥用next.js而不是直接用react.js呢？
这是因为next.js它本身就有几个react.js默认没有的优点：
- 默认支持
SSR和SSG，有着更好的SEO和首屏加载速度；
- 内置路由系统，搭配模版和页面的使用，可以不用再去配置
react-router；
- 内置
API系统，例如博客这类简单的后端功能甚至直接可以用next.js完成；
这是我认为next.js相比react.js下，体现出来的优点，当然也还有其他的地方。
SSR和SSG
这是我们经常能听到的两个名词：SSR和SSG，他们对应的中文翻译叫做：服务端渲染和静态站点渲染。区别就是在于一个是实时渲染，一个是构建时预渲染，具体区别如下：
| 方式 |
SSR |
SSG |
| 渲染时机 |
请求的时候 |
构建的时候 |
| 响应速度 |
快 |
很快 |
| 服务器压力 |
中 |
小 |
| 适合场景 |
需展示最新的数据 |
固定显示的内容 |
项目初始化
这一篇落，我们来说一下如何用next.js官方的脚手架创建一个项目并且简单介绍目录结构的功能。
create-next-app
创建next.js的项目，我们需要使用create-next-app来进行项目搭建，打开终端，输入以下命令：
npx create-next-app@latest demo
此时，可以看到界面询问我们创建next.js需要选择的功能，这个按个人需求来选择，选择完成后最终效果如下图：
此时，项目已经创建完毕，使用VSCode打开该项目。默认情况下，目录结构下的内容并不多，这里我们需要了解的是几个地方：
- public/ 用于存放静态资源的目录
- src/app 用于存放页面的目录（这里是AppRouter，是官方目前推荐的，对应的还有老版本PageRouter，不过不再推荐）
- next.config.ts 这个是
next.js的框架配置文件，功能很多也很重要
- eslint.config.mjs 这个是
eslint的配置文件
现在，我们着重关注的应该是src目录，之后的许多工作如业务代码编写，都会在该目录下进行。
从这一篇落起，就一直在提到目录，是因为在next.js项目中，目录非常重要。
在next.js中，有着默认的约定，例如这里：src/app目录下就对应页面目录，每一个以page.tsx命令的文件就是一个页面。
我们要严格遵循next.js的目录约定，否则会有意想不到的问题产生！
目录结构
目录结构是next.js的一个重点，因为next.js的目录命名是约定式的，即不同的目录命令可能对应着不同的功能，若使用错误，则会导致意想不到的问题产生。
在next.js的目录中，包括布局、页面、中间件等等功能的命名约定...后面我们说的理论内容，也基本都和每个目录或文件有关。
public公共目录
对于静态文件，通常在public目录下进行存放，例如图片这一类的资源，当需要访问时，直接通过/即可。
例如：在public目录下有一张图片logo.png，访问方式如下：
<Image src="/logo.png" alt="logo" width={32} height={32} />
布局
在next.js中，命名为layout.tsx的文件就叫布局。他的功能在于，定义公共部分的UI，该部分UI不会受路由的切换而更新，通常用于导航栏、侧边栏或者底部。
例如下面的布局中，当我们切换路由时，变化的是main标签里面的内容，而header和footer标签内容不会改变。
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<header>Header</header>
<main>
{/* 当路由切换，这里的内容将进行更新 */}
{children}
</main>
<footer>Footer</footer>
</body>
</html>
);
}
另外，除了默认的根布局以外，我们还可以在app下每一个页面目录重新创建layout.tsx来定义子布局，以此来创建出更多的布局效果。
如果需要创建多个根布局，那就需要用到“组”概念，我们后续来谈。
页面
页面是next.js的第二个核心功能，每一个页面我们都由page.tsx来命名。在next.js中，默认已经存在首页，即src/app/page.tsx文件。通过访问/根路径，我们将看到此页面。
如果想创建新的页面，那就需要新建一个新的目录，并且添加page.tsx文件。例如，这里我们在src/app目录下面，新建hello/page.tsx文件，编写如下代码：
function HelloPage() {
return (
<div>
HelloPage
</div>
);
}
export default HelloPage;
此时，我们就已经成功创建了一个页面，如何访问这个页面呢？还记得前面说的next.js重在约定嘛，在app目录下面的每一个目录命名，即代表页面路由的命名。
所以这里的hello目录名对应的路由即为/hello，此时访问/hello可以看到如下内容：
动态路由
通过上面的例子可以实现页面和路由创建，那假如此时有这样一个新需求：通过访问hello/a或者hello/b或者hello/xxxx都能匹配到同一个页面，并根据匹配不同的路径来显示不同的内容。
这里就需要使用到next.js的动态路由功能了，动态路由以中括号[...]来命名，根据上面例子我们则需要更改hello目录为hello/[slug]/page.tsx。
这里的[slug]就表示动态匹配（slug不是必须这个格式，但是获取参数需要根据对应名称来获取）。
此时修改hello/[slug]/page.tsx代码如下：
async function HelloPage({ params }: { params: Promise<{ slug: string }>}) {
const { slug } = await params;
return (
<div>
Hello：{ slug }
</div>
);
}
export default HelloPage;
此时再访问/hello/a时，将会看到如下内容：
如何匹配多层动态路由
当需要捕获多层动态路由时，例如：/hello/a/b/c，此时就需要通过[...slug]这种方式命名目录，更改hello/[slug]/page.tsx为hello/[...slug]/page.tsx，修改为如下代码：
async function HelloPage({ params }: { params: Promise<{ slug: string[] }>}) {
const { slug } = await params;
return (
<div>
Hello：{...slug}
</div>
);
}
export default HelloPage;
此时再访问/hello/a/b/c将会看到如下页面：
这里的params是固定的写法，与searchParams不同，通过params来获取的是动态路由上面的参数！
[...slug]和[[...slug]]
动态路由的命名方式有两种，一种就是刚刚使用的[...slug]，还有一种就是[[...slug]]。他们的区别就是在于，是否有匹配的动态参数。
例如当访问/hello时，[...slug]会出现404，而[[...slug]]依然呈现页面，只是没有参数。
参数获取
除了动态路由的方式能获取参数以外，还可以通过路径后面的?追加参数并获取，例如当访问hello/a?name=cola时，此时可以通过下面方式获取参数：
async function HelloPage({
params,
searchParams
}: {
params: Promise<{ slug: string[]}>,
searchParams: Promise<Record<string, string>>
}) {
const { slug } = await params;
const { name } = await searchParams;
return (
<div>
Hello：{...slug}，{name}
</div>
);
}
export default HelloPage;
此时页面将会更新为：
服务端渲染
默认创建的页面都是服务端渲染的页面，即不能使用react.js的useState或者useEffect这类依赖浏览器类的api，需要定义变量直接在函数里面定义即可，也不需理会生命周期等元素，例如：
async function HelloPage({
params,
searchParams
}: {
params: Promise<{ slug: string[]}>,
searchParams: Promise<Record<string, string>>
}) {
const { slug } = await params;
const { name } = await searchParams;
const animals = ['松鼠', '大象', '老虎'];
// const [animals] = useState(['松鼠', '大象', '老虎'];); 不能使用，会报错
return (
<div>
<p>Hello：{...slug}，{name}</p>
<p>{animals}</p>
</div>
);
}
export default HelloPage;
客户端渲染
倘若我们需要页面进行客户端渲染而不是服务端渲染，此时则需要再page.tsx文件顶部添加'use client;'来进行标记，此时next.js将对该文件进行客户端渲染。
当使用客户端渲染时，此时就要用到react.js里面的useState或者useEffect这类钩子函数，而不是像服务端组件那样直接定义变量。
另外，在客户端组件中，因为不能使用async来定义函数，所以获取参数的方式也有变化，其改变如下代码所示：
'use client';
import { useSearchParams } from "next/navigation";
import { use } from "react";
function HelloPage({
params,
}: {
params: Promise<{ slug: string[]}>,
searchParams: Promise<Record<string, string>>
}) {
const { slug } = use(params);
const name = useSearchParams().get('name');
const animals = ['松鼠', '大象', '老虎'];
return (
<div>
<p>Hello：{...slug}，{name}</p>
<p>{animals}</p>
</div>
);
}
export default HelloPage;
动态路由的参数params通过React.use来获取，而路径参数则通过useSearchParams方法获取之后，再通过get或者getAll获取参数。
注意事项
即使是使用了客户端渲染的页面，也可能出现window is not defined这类问题产生，这可能是由于引入的第三库直接就使用了window的原因。而next.js的页面呈现，也会在node环境下进行，所以导致该类问题产生。
解决方案：考虑在useEffect钩子函数里面动态引入。
404页面
在next.js目录中，我们可以用not-found.tsx文件来命名404页面，不过情况又分为两种。
路径404页面
路径404页面是指我们访问不存在的路由时，展示出来的页面。一般来说，当访问不存在的路由时，都会返回app目录下的not-found.tsx文件。
逻辑404页面
逻辑404页面是指，在页面中可能遇到不存在的情况时，需要通过代码来跳转到404页面。例如：动态路由需要传递[id]，但此时获得了不为数字的id时，就可以通过执行notFound方法来跳转。
逻辑跳转会从当前目录的not-found.tsx文件开始查找，直到根目录下的not-found.tsx文件。
加载页面
加载页面即loading.tsx是在数据还在请求或者组件正在挂载时，展示的页面。它也可以放在根目录或者其他页面目录下，其原理就等同于Suspense组件。
app/
dashboard/
page.tsx
loading.tsx
// 框架内部伪代码
<Suspense fallback={<DashboardLoading />}>
<DashboardPage />
</Suspense>
错误页面
组与私有目录
组和私有目录都是在app目录下，但不会被next.js识别为页面的两种命名形式。
组
组通过(...)来命名，可以用于多级根布局的实现，例如有模块A和模块B两个模块，需要不同的布局。此时，创建两个目录(A)和(B)，然后分别在其目录下创建新的layout.tsx布局文件。
私有目录
私有目录通过_来命名，可以用于表示存放组件的目录，例如页面pageA下需要创建一些只用于该页面的组件时，就可以在pageA目录下创建_components目录来存放。
并行路由和拦截路由
并行路由和拦截路由都是不被next.js识别为页面的两种命名方式，拦截路由依托于并行路由来实现效果。
并行路由
先来说一下并行路由，并行路由是在页面目录下通过@xxx/page.tsx命名的文件，该页面也可以像children一样通过layout.tsx展示，方式如下：
// pageB/@top/page.tsx
function PageBTop() {
return (
<div>
PageBTop
</div>
);
}
export default PageBTop;
// pageB/layout.tsx
import { ReactNode } from "react";
function LayoutB({
children,
top,
}: {
children: ReactNode,
top: ReactNode,
}) {
return (
<div className="border border-red-400">
<div>LayoutB-Header</div>
<div>{top}</div>
<div>{children}</div>
<div>LayoutB-Footer</div>
</div>
);
}
export default LayoutB;
其展示的页面如下：
对比写到一个page.tsx文件的好处就是，并行路由可以单独的写其他逻辑，例如loading.tsx和not-found.tsx等文件，甚至也可以在并行路由下创建新的路由。
注意：创建并行路由没有生效时，删除.next文件重新启动。
拦截路由
拦截路由是用于，当点击某个会进行路由跳转的UI（图片、按钮等）时，不进行页面跳转，而是在当前页面中进行显示，写法为：
-
(.)匹配同一级别的段
-
(..)匹配上一级的段
-
(..)(..)匹配上两级的段
-
(...)匹配根 app目录中的段
现在修改pageB目录，将@top/目录为@top/(..)pageA/page.tsx，此时当在pageB目录下的进行点击跳转到/pageA路由时，将会弹出@top/(..)pageA/page.tsx下的文件，如下：
// @top/(..)pageA/page.tsx
function PageA() {
return (
<div className="fixed left-1/2 top-1/2 -translate-1/2 w-lg aspect-[3/2] border border-gray-100 bg-white shadow-md p-3 rounded-md">
PageA
</div>
);
}
export default PageA;
提示
上面记得要在@top目录下创建一个default.tsx文件，否则会出现404问题，内容如下即可：
// @top/default.tsx
function Page() {
return null;
}
export default Page;
// pageB/layout.tsx
import Link from "next/link";
import { ReactNode } from "react";
function LayoutB({
children,
top,
}: {
children: ReactNode,
top: ReactNode,
}) {
return (
<div className="border border-red-400">
<div>LayoutB-Header</div>
<div>
{children}
<Link href="/pageA">拦截路由</Link>
</div>
<div>LayoutB-Footer</div>
{top}
</div>
);
}
export default LayoutB;
点击拦截路由跳转时，页面效果如下：
提示
拦截路由不会影响直接在浏览器中输入路由的操作，意味着输入/pageA路由时依然展示为pageA页面。
建议
如果不是非得使用拦截路由和并行路由的话，暂时不建议。我在一些论坛上看到挺多人提出问题的，自己在学习这部分时也有问题，有时需要删除.next重新启动服务才能解决。
中间件
在next.js中，中间件一般是用来做路由拦截、响应或者鉴权来使用的。通过在src或者根目录下创建文件middleware.ts来使用，并且需要默认导出一个函数，如下：
// src/middleware
export default function middleware() {
console.log('middleware.');
}
当刷新页面后，可以看到终端打印如下，输入了很多'middleware'语句：
这是因为middleware处理的不仅仅只是路由请求，还有其他资源请求，修改代码如下，再刷新页面可以看到：
// src/middleware
import { NextRequest } from "next/server";
export default function middleware(req: NextRequest) {
console.log(req.url + ':middleware.');
}
如果需要对指定路径进行处理的话，就需要使用匹配器，其使用方法如下：
// src/middleware
import { NextRequest } from "next/server";
export default function middleware(req: NextRequest) {
console.log(req.url + ':middleware.');
}
export const config = {
matcher: ['/pageB'],
}
此时只有当请求路径为/pageB的路径才会被中间件处理，刷新页面后打印效果如下：
所以，通过中间件功能我们也可以实现鉴权等功能，例如：
// src/middleware
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(req: NextRequest) {
const token = req.cookies.get('token');
if (!token) {
return NextResponse.redirect(new URL('/login', req.url));
}
}
export const config = { matcher: ['/dashboard/:path*'] };
中间件的功能还是比较丰富的，就不一一赘述了，具体可以看文档：next.js中间件
服务端API
在next.js中可以通过在app目录下创建api目录来作为后端接口，进行响应。
目录名称api是固定写法，可以通过next.config.ts配置文件进行修改。
在api目录下，可以新建新的目录进行api接口命名，类似页面那样，例如在api目录新建hello/route.ts文件，就代表接口为：/api/hello。
route.ts
现在已经知道怎么创建一个api了，如何创建对应的响应呢？通过next.js提供的写法来实现，如下：
// src/app/hello/route.ts
import { NextResponse } from "next/server"
export const GET = () => {
return NextResponse.json({
code: 0,
data: 'this is data',
}, { status: 200 });
}
上面的GET方法就表示为/api/hello的Get请求处理逻辑，其他请求类型写法也一样。此时，打开浏览器访问http://localhost:3000/api/hello，可以看到显示如下：
元数据
在next.js中，元数据其实就是通过js对象来管理head标签的一种方式，其作用包含对SEO的优化等，分为两种情况。
静态元数据
静态元数据，即固定显示的，无需动态修改。通过导出一个metadata对象即可，例如：
import { Metadata } from "next";
export const metadata: Metadata = {
title: 'PageC',
description: 'PageC description.'
}
function PageC() {
return (
<div>
PageC
</div>
);
}
export default PageC;
上面我们定义了title和description两个元数据，此时再看页面可以发现：
动态元数据
当元数据需要动态添加时，此时就不能直接用对象的方式定义，而是通过函数generateMetadata来实现，如下：
import { Metadata } from "next";
export const generateMetadata = async (): Promise<Metadata> => {
const getMetaData = () => new Promise<{ title: string, description: string }>(resolve => setTimeout(() => {
resolve({
title: 'Async PageC',
description: 'Async PageC description.'
})
}, 1e3));
const { title, description } = await getMetaData();
return {
title,
description
}
}
function PageC() {
return (
<div>
PageC
</div>
);
}
export default PageC;
此时在页面上可以看到动态添加的属性，如下图：
元数据的配置还有很多，具体可以看：next.js元数据
图像
在next.js中内置了经过优化的Image图像组件，使用该组件时需满足以下任意一条：
- 给定明确的
width和height属性；
- 给定
fill属性；
例如：
function PageC() {
return (
<div>
PageC
<Image src="/cover.jpg" alt="img" width={80} height={120} />
<div className="w-[80px] h-[120px] relative">
<Image src="/cover.jpg" alt="img" fill />
</div>
</div>
);
}
export default PageC;
倘若使用远程图片的话，则需要在next.config.ts中进行配置，否则构建阶段可能出现意想不到的问题，具体配置可以看：next.js内置图像组件。
缓存
在next.js中，请求接口一般采用fetch方法，并在next.js对于fetch方法进行了扩展，增加了缓存的功能，而且缓存不仅与请求，对于页面来说next.js也进行了缓存功能的实现。
fetch缓存
在使用fetch时，当我们添加了如下参数，即进行了缓存：
// 此时在一分钟内的请求都会返回缓存的数据
fetch('https://...', { next: { revalidate: 60 } });
如果说不需要缓存功能的话，则用如下方式请求：
fetch('https://...', { cache: 'no-store' });
另外，在扩展的fetch请求中还可以通过打上tag来强制刷新，例如：
fetch('https://...', { next: { tags: ['test'] } });
当执行revalidateTag('test')后，下一次带有test标签的请求将会获取最新的数据。
页面缓存
在页面中，可以通过定义revalidate属性来配置缓存效果，例如：
export const revalidate = 60;
function PageC() {
return (
<div>
PageC
</div>
);
}
export default PageC;
此时，当通过next build构建时，将会预渲染这个页面，并且能缓存60s的时间，当过了缓存时间后再请求新的页面数据，该配置有3种：
- false 强制为
SSG模式，不再对页面进行动态渲染；
- 大于0的数字 页面的缓存时间；
- 0 不进行页面缓存，每次请求直接通过
SSR来渲染页面；
默认来说，在next.js中是通过静态生成+SSR方式来进行构建的，也就是所谓的ISR增量静态再生。
样式
对于样式来说，第一个推荐直接使用css文件，然后在页面或者组件中直接引入，类似默认next.js项目引入global.css一样。
第二个就是推荐创建next.js时，可选安装的tailwindcss工具，这个工具是一个原子化CSS的写法，用起来非常方便和简洁。
ESLint
在创建next.js时，也可选用eslint工具，此时会在根目录生成eslint.config.mjs文件，内容如下：
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
{
ignores: [
"node_modules/**",
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
],
},
];
export default eslintConfig;
如果需要自定义规则的话，可以修改上述代码，例如：
const eslintConfig = [
...compat.config({
extends: ['next/core-web-vitals', 'next/typescript'],
// 自定义插件
plugins: ['simple-import-sort'],
// 自定义规则
rules: {
'semi': ['warn', 'always'],
'quotes': ['error', 'single'],
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error'
}
}),
{
ignores: [
'node_modules/**',
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
'src/components/ui/**'
],
},
];
ShadCN
这里推荐一个工具：shadcn，他不是单纯的UI库，而是将radix-ui、tailwindcss、theme、icon等整合的一个工具平台，安装也很简单，如下：
npx shadcn@latest init
具体细节可以看：shadcn文档
结束
以上就是next.js的常用基础概念，因为其概念比较多，不能都详细说明，当然这也是优秀强大的框架带来的学习成本。其生态技术远不止这些，感兴趣的话可以通过论坛、视频等再进行学习！
登录
