【Next】3. 开发规范

笔记来源：编程导航

1、约定式路由

Next.js 使用 约定式路由，根据文件夹的结构和名称，自动将对应的 URL 地址映射到页面文件。

常见的几种路由规则如下：

1）基础规则：以 app 目录作为根路径，根据文件夹的名称和嵌套层级，自动映射为 URL 地址。注意，只有目录下直接包含 page 文件（js、jsx、ts、tsx 都支持），才会被识别为路由。

2）路由组：可以通过 (xxx) 语法，创建一个路由组，不会被转化为路径，可用于对路由进行分组管理，比如同组路由使用同一套布局。

3）动态路由：可以通过 [xxx] 语法，让多个不同参数的 URL 复用同一个页面，比如 app/question/[questionId]/page.tsx 中 questionId 就是动态路由参数，可以匹配 /question/1、/question/2 等 URL 地址，在页面中可以获取到 questionId 并加载不同的题目。

export default function Page({ params }: { params: { questionId: string } }) {
  return <div>我的题目: {params.questionId}</div>
}

以上只是 Next.js 的几种常用路由规则，还有其他的规则，详情可以见 Next.js 的官方文档：https://nextjs.org/docs/app/building-your-application/routing

2、静态资源

Next.js 约定在 /public 目录下存放静态资源。在其中新建 assets 目录，可以在里面存放图片等静态资源文件，比如网站的 Logo。1615897920391872514_0.02139650278099836

对应官方文档：https://nextjs.org/docs/app/building-your-application/optimizing/static-assets

然后就可以用 Next.js 的 Image 组件加载静态资源，比如：

<Image src={`/assets/logo.png`} alt={alt} width="64" height="64" />

Next.js 会针对该组件进行特定的图像优化，提升性能。

注意，某些特殊的、常用的元信息文件不是放在 public 目录下，而是应该根据特定规则放在 app 目录下！

对应官方文档：https://nextjs.org/docs/app/api-reference/file-conventions/metadata

比如将 favicon.ico 放到 app 的根目录下，可展示站点小图标。将 robots.txt 放到 app 的根目录下，可用于告诉搜索引擎爬虫能否访问特定的页面、以及站点地图的地址，比如：

User-Agent: *
Allow: /
Disallow: /private/

Sitemap: https://mianshiya.com/sitemap.xml

3、文件组织形式

首先，项目中的每个页面和组件都是单独的文件夹。

基于 Next.js 的约定式路由，我们每个页面目录内需要添加 page.tsx 页面文件和 index.css 样式文件；每个组件目录内添加 index.tsx 页面文件和 index.css 样式文件。对于非页面文件，可以使用 index.tsx 替代 page.tsx。而且 index.css 也可以使用 index.module.css 的 css 模块化来替代。

对于项目中多页面公用的组件，放在 src/components 目录下；对于某个页面私有的组件，放在该页面的 components 目录下。

4、页面开发规范

Next.js 支持 React 的语法，可以用函数的方式声明页面和组件。每个页面的根元素必须有 id、每个组件根元素必须有 className，用于控制样式和快速定位。

为了区分服务端和客户端渲染，每个页面（或组件）都必须在开头显示编写 “use client” 或 “use server”

默认为服务端，需要使用客户端需要在开头指定，当然，内部不单单是使用客户端那么简单，而是进行一种混合操作。

5、其他注意事项

1）开发时要严格注意 TypeScript 的类型和编辑器的错误提示，并且定期打包构建。因为 Next.js 的构建要求非常严格，稍有不慎就会报错。构建报错的话，注意查看和处理构建中的报错信息。

2）在项目中慎用 window 等浏览器环境才支持的对象，服务端无法使用。注意保证客户端渲染页面和服务端渲染页面的一致性，否则会出现水合错误。