next.js全栈
🔟关于next.js路由的学习
00 min
2021-7-24
2024-10-1
type
status
date
slug
summary
tags
category
icon
password
😀
前言： 路由是next.js的核心部分，也是网页构建的核心，一个大型的网页的构建是离不开对于现阶段路由的学习的，所以，
 

📝 深入学习next.js的路由和应用场景

静态路由

引用的话语

动态路由

应用场景：多语言站点的实现，正常的blog的文章页的实现
作用范围
通过将文件夹名称用方括号括起来，可以创建动态段：[folderName]。例如，[id] 或 [slug]。
动态段作为 params 属性传递给 layout、page、route 和 generateMetadata 函数。
 
几种写法：
第一种：app/blog/[slug]/page.tsx
 
路由
示例 URL
params
app/blog/[slug]/page.js
/blog/a
{ slug: 'a' }
app/blog/[slug]/page.js
/blog/b
{ slug: 'b' }
app/blog/[slug]/page.js
/blog/c
{ slug: 'c' }
查看 generateStaticParams() 页面，了解如何为段生成参数。
第二种：

捕获所有段

动态段可以通过在括号内添加省略号来扩展为 捕获所有 后续段：[...folderName]。
例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，同时也匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。
路由
示例 URL
params
app/shop/[...slug]/page.js
/shop/a
{ slug: ['a'] }
app/shop/[...slug]/page.js
/shop/a/b
{ slug: ['a', 'b'] }
app/shop/[...slug]/page.js
/shop/a/b/c
{ slug: ['a', 'b', 'c'] }
ㅤ
ㅤ
ㅤ

第三种：

可选的捕获所有段
捕获所有段可以通过将参数包含在双方括号中来设为 可选：[[...folderName]]。
例如，app/shop/[[...slug]]/page.js 除了匹配 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts，还会 同时 匹配 /shop。
捕获所有 和 可选捕获所有 段的区别在于，可选的情况下，不带参数的路由也会被匹配 (上例中的 /shop)。
路由
示例 URL
params
app/shop/[[...slug]]/page.js
/shop
{}
app/shop/[[...slug]]/page.js
/shop/a
{ slug: ['a'] }
app/shop/[[...slug]]/page.js
/shop/a/b
{ slug: ['a', 'b'] }
app/shop/[[...slug]]/page.js
/shop/a/b/c
{ slug: ['a', 'b', 'c'] }
 

应用场景

1. 用户资料页面

场景描述：社交媒体或用户管理系统中，用户的个人资料通常通过其唯一标识符（如用户 ID）在 URL 中表示。
实现方式：
  • 路由文件命名为 [userId].js，以动态捕获用户 ID。
  • 在 getStaticPaths 或 getServerSideProps 函数中，根据用户 ID 加载用户数据。
 
 

2. 产品详情页

场景描述：电商网站中，产品详情页通常根据产品的唯一标识符（如 SKU 或产品 ID）来生成。
实现方式：
  • 路由文件命名为 [productId].js。
  • 在 getStaticPaths 中生成所有产品的路径，在 getStaticProps 中获取产品的详细信息。

3. 博客文章

场景描述：博客系统中，每篇文章通常通过其唯一的 slug（短链接）表示。
实现方式：
  • 路由文件命名为 [slug].js。
  • 在 getStaticPaths 中生成所有文章的路径，在 getStaticProps 中加载文章内容。

4. 论坛主题或讨论串

场景描述：在论坛中，每个主题或讨论串通常也通过唯一标识符表示，便于用户访问。
实现方式：
  • 路由文件命名为 [threadId].js，捕获讨论串的 ID。
  • 加载讨论串的详细信息以及相关评论。

5. 地区或城市页面

场景描述：旅游网站可能会有每个城市或地区的介绍页面，这些页面通常通过城市名称或 ID 来动态生成。
实现方式：
  • 路由文件命名为 [city].js。
  • 根据城市名称加载相关的旅游信息和推荐。

总结

动态路由在 Next.js 中为处理需要根据 URL 参数动态生成内容的场景提供了强大的支持。通过结合 getStaticPaths 和 getStaticProps 或 getServerSideProps，可以轻松实现多种类型的动态页面。
如果你有特定的场景或需求，欢迎告诉我，我可以提供更详细的示例或解释！
 
 
 

平行路由

路由拦截

引用的话语

后端路由

引用的话语

🤗 总结归纳

总结文章的内容

📎 参考文章

  • 一些引用
  • 引用文章
 
💡
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
上一篇
关键词await，async，fetch，promise
下一篇
next.js的常见错误查询