Skip to content

[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、项目目录

image-20230222170934146

  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.jsontypescript相关配置文件。

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

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

image-20230222172654616

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 .tsAPI 端点
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从根拦截