【Next】3. 开发规范

news2024/9/20 20:31:03

笔记来源：编程导航

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 目录下。