初识 Nextjs

创建项目

npx create-next-app

这会生成一个新的项目文件夹，包含了一个简单的 Next.js 应用。如果要在当前文件夹下创建项目，可以使用：

npx create-next-app .

目录结构

.
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.js
└── tsconfig.json

nextjs 新版本推荐使用 app router，所以我们的页面都放在 app 文件夹下。如果你想继续用之前的 pages 文件夹，也是可以的，这里主要是用来演示 app router 的使用。毕竟这个是现在官方推荐的。

app router

app router 是 nextjs 新版本推荐的路由方式，一般包含页面的布局 layout，和页面 page。这样的好处是，可以在 layout 里面做一些公共的事情，比如导航栏，底部栏，侧边栏等等。而 page 里面只需要关注页面的内容就可以了。

./app
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx

这里简单知道下概念，后面会单独细说下这个。

文件名含义

因为 nextjs 会有一定的规则来生成目路由结构，所以对于文件夹的结构和命名也有相应的要求，看一下每一个文件命名的含义和作用

一级文件夹

• app 应用路由
• pages 页面路由
• public 静态资源
• src 可以自选的源代码

一级文件

• next.config.js nextjs的配置
• package.json 包依赖
• instrumentation.ts OpenTelemetry 和 Instrumentation
• middleware.ts 请求中间件
• .env 环境变量
• .env.local 本地环境变量
• .env.development 开发环境变量
• .eslintrc.json Eslint 配置
• .gitignore git 要忽略的配置
• next-env.d.ts ts 声明
• tsconfig.json ts 配置
• jsconfig.json js 配置
• postcss.config.js Tailwind CSS 配置
• tailwind.config.js Tailwind CSS 配置

app 文件夹下的约定

• layout.tsx 页面布局
• page.tsx 页面
• loading.tsx 页面加载中
• not-found.tsx 页面未找到
• error.tsx 页面错误
• global-error.tsx 全局错误
• route.tsx api 路由
• template.tsx 页面模板
• default.tsx 默认页面
• globals.css 全局样式
• favicon.ico 网站图标

app下可以用文件夹来生成页面路由，也可以通过嵌套的文件夹来生成嵌套的路由，比如

./app
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── user
    ├── [id].tsx
    ├── index.tsx
    └── profile
        ├── [id].tsx
        └── index.tsx

其中[id]约定生成动态路由，比如/user/1，/user/2等等。

如果文件夹用小括号包裹，比如(user)，就代表进行了分组。但是这个只是文件夹的分组并不会影响生成的路由，算是一个语义化的分组。如果文件夹是带下划线的，比如_user，就代表这个文件夹是私有的，不会生成路由。

小结

使用自带的脚手架创建项目，可以快速的创建一个 nextjs 项目，而且项目结构也是比较清晰的，上文也介绍了一些文件夹和文件的作用，后面会详细介绍每一个文件的作用和使用方法。这里对一个 nextjs 项目的结构有了一个大概的了解，然后在对每一个模块进行详细的介绍和实践。