[toc]

1、创建项目

pnpm create next-app my-next-app

npx create-next-app@latest

-询问选项：

1. 项目名称，这里输入nextjs-demo。
2. 项目是否需要使用ESLint。
3. 是否需要在项目中使用src目录，默认会吧所有文件放在根目录，为了方便开发，这里启用src目录。
4. 是否启用app目录，默认会放一些框架相关的东西。这里启用之后会在app目录中生成首页内容。
5. 是否启用别名，方便使用，直接启用了。

2、项目目录

1. .next目录。这是Nextjs的缓存目录，在执行dev或者build等命令的时候，会在本地项目的根目录下生成此目录，开发不需要关注。想要了解更多的可以稍微研究一下，使用缓存/已生成的方式加速编译。
2. .vscode目录。看名字就知道，这个是vscode编辑器使用到的配置目录。
3. node_modules目录。这是三方依赖的目录，这里不多介绍。
4. public目录。这个主要放置静态资源，默认没有二级目录，为了方便可以简单创建几个目录来放相关资源。默认路径是在根目录，使用的时候可以使用类似/favicon.ico的形式引用。
5. src目录。这个目录是主要源代码的位置，初始目录下有app默认页和pages其他页面目录。在pages目录下还有一个默认api目录，主要放置Nextjs提供的服务端API。可以简单看一下默认提供的hello.ts文件内容。
6. .eslintrc.json。主要是eslint的规则。
7. .gitignore。git排除文件。
8. next-env.d.ts。nextjs的一些ts相关内容，目前只有默认引用。
9. next.config.js。Nextjs的配置文件，这里默认只有appDir参数。
10. package-lock.json。项目依赖lock文件。
11. package.json。项目npm相关文件。
12. README.md。文档说明。
13. tsconfig.json。typescript相关配置文件。

3、使用自定义入口文件_app.tsx

创建文件src/pages/_app.tsx。这个文件主要是作为所有页面的入口文件，可以简单做一些统一处理的逻辑。需要可以创建，不需要可以删除，不影响项目运行。

4、app 路由约定

路由文件

layout 布局	.js .jsx .tsx .js.jsx.tsx	布局
page 页	.js .jsx .tsx .js.jsx.tsx	页面
loading 装载	.js .jsx .tsx .js.jsx.tsx	加载用户界面
not-found 未找到	.js .jsx .tsx .js.jsx.tsx	未找到用户界面
error 错误	.js .jsx .tsx .js.jsx.tsx	错误用户界面
global-error 全局错误	.js .jsx .tsx .js.jsx.tsx	全局错误用户界面
route 路线	.js .ts	API 端点
template 模板	.js .jsx .tsx .js.jsx.tsx	重新渲染布局
default 违约	.js .jsx .tsx .js.jsx.tsx	并行路由后备页面

嵌套路由

folder	路由段
folder/folder	嵌套路由段

动态路由

[folder\]	动态路段
[...folder\]	包罗万象的路由段
[[...folder\]]	可选的包罗万象的路由段

路由组和私有文件夹

(folder)	对路由进行分组而不影响路由
_folder	选择文件夹和所有子段不参与路由

并行和拦截的路由

@folder	命名槽
(.)folder	拦截同级
(..)folder	拦截上方一层
(..)(..)folder	拦截上面两层
(...)folder	从根拦截