笔记来源:编程导航
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 等浏览器环境才支持的对象,服务端无法使用。注意保证客户端渲染页面和服务端渲染页面的一致性,否则会出现水合错误。
标签:app,规范,js,开发,组件,Next,路由,页面 From: https://blog.csdn.net/XiugongHao/article/details/141829908