首页 > 其他分享 >【Next】3. 开发规范

【Next】3. 开发规范

时间:2024-09-02 21:21:56浏览次数:10  
标签:app 规范 js 开发 组件 Next 路由 页面

笔记来源:编程导航

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

相关文章

  • react-hook-form 搭配 next-intl 国际化插件 处理form 表单错误
    useEffect(()=>{ form.clearErrors() if(state&&state.data){ router.push('/') } //后台错误 if(state&&state.errorMessage){ //showErrorToast(t(state.errorMessage)) showErrorToast(state.errorMessage) } ......
  • JSP家庭垃圾分类管理系统21wg8(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景随着城市化进程的加快,生活垃圾产生量急剧增加,其中家庭垃圾占据重要比例。传统的垃圾处理方式已难以适应环保要求,垃圾分类成为解决垃圾......
  • 实现AI带货直播需要开发一个插件!
    在电商行业蓬勃发展的今天,直播带货已成为商家们竞相追逐的新风口,而随着人工智能(AI)技术的日益成熟,将AI融入带货直播,无疑将为这一领域带来革命性的变化。直播带货以其独特的互动性和即时性,迅速赢得了消费者的青睐,然而,传统直播带货模式在商品推荐、互动引导等方面仍存在一定的局限性......
  • 盲盒小程序开发,探索市场发展优势
    随着潮玩市场的火热,盲盒已经成为了一种集娱乐、社交、消费为一体的模式,越来越多的消费者被盲盒所吸引,盲盒市场也迎来了巨大的发展空间,带来了各种商业机遇,同时为创业者提供新的创业渠道。本文将探讨盲盒小程序的开发带来的发展优势。盲盒小程序是一个线上购物模式,传统的盲盒具有价格......
  • Java开发语言:ssm人力资源管理系统010(附免费源码)
    摘 要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流,人类发展的历史正进入一个新时代。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设人......
  • 运行开发模板报错lombok java 无法将类 XX类中的构造器 X应用到给定类型|java: 找不到
    一.运行环境IntelliJIDEA2024.1.4  IDEA旗舰版二.解决方法1.更改lombok版本→1.8.30<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope......
  • 盲盒小程序开发,探索市场发展优势
    随着潮玩市场的火热,盲盒已经成为了一种集娱乐、社交、消费为一体的模式,越来越多的消费者被盲盒所吸引,盲盒市场也迎来了巨大的发展空间,带来了各种商业机遇,同时为创业者提供新的创业渠道。本文将探讨盲盒小程序的开发带来的发展优势。盲盒小程序是一个线上购物模式,传统的盲盒具......
  • PHP 8.4 的新特性中,哪些对开发者来说最实用,最值得关注?
    随着PHP8.4版本的临近,开发者们正热切期待这一新版本的发布。PHP8.4不仅带来了一系列令人兴奋的新特性,而且这些更新在提升开发效率和代码质量方面具有重大意义。在这篇文章中,我们将探讨PHP8.4中对开发者来说最实用和最值得关注的特性。———JIT,即时编译器(JIT)的改进。JI......
  • 助力移动道路交通环保治理,打赢蓝天保卫战,基于YOLO家族最新端到端实时算法YOLOv10全系
    在快速发展的现代社会中,工业化的步伐虽推动了城市的繁荣,但环保问题也随之成为我们不得不面对的重大挑战。特别是在移动道路交通领域,路边与路面裸土堆积、道路扬尘等问题,不仅影响城市形象,更对空气质量与居民健康构成了严重威胁。面对这一现状,传统的监测治理手段已难以满足高效、......
  • delphi开发Excel用户定义函数
    在Delphi中开发Excel用户定义函数(User-DefinedFunction,UDF)通常涉及到以下几个关键步骤:1.**创建DLL文件**-使用Delphi编写一个动态链接库(DLL),其中包含要作为ExcelUDF的函数。函数必须遵循特定的签名规范,以便Excel能够识别和调用。示例UDF函数:```delphilibr......