在 Next.js 中，文件名或文件夹名中使用方括号 []

在 Next.js 中，文件名或文件夹名中使用方括号 [] 是一种特殊的语法，用于创建动态路由。这种语法允许你定义可变的 URL 段，使得你的应用能够处理不同的参数和动态内容。让我们深入探讨这个概念，并了解它的各种用法和最佳实践。

1. 基本概念

在 Next.js 中，方括号 [] 用于表示动态路由段。当你在 pages 目录下创建一个带有方括号的文件或文件夹时，Next.js 会将其解释为一个动态路由。

例如：

• pages/posts/[id].js 将匹配 /posts/1, /posts/2, /posts/abc 等路由

2. 动态路由的工作原理

当你创建一个动态路由时，Next.js 会自动将匹配的 URL 段作为参数传递给你的组件。你可以通过 useRouter 钩子来访问这些参数。

// pages/posts/[id].js
import {
   
    useRouter } from 'next/router'

export default function Post() {
   
   
  const router = useRouter()
  const {
   
    id } = router.query

  return <p>Post: {
   
   id}</p>
}

在这个例子中，访问 /posts/123 会渲染 “Post: 123”。

3. 多级动态路由

你可以在路径中使用多个动态段：

pages/[category]/[id].js

这将匹配像 /news/123 或 /sports/456 这样的路由。

4. 捕获所有路由

如果你想捕获所有后续的路径段，可以使用 … 语法：

pages/posts/[...slug].js

这将匹配 /posts/2020/01/01, /posts/category/subcategory 等。你可以通过 router.query.slug 访问这些段，它们会以数组的形式提供。

5. 可选的捕获所有路由

如果你想让捕获所有路由变为可选，可以将参数包裹在双方括号中：

pages/[[...slug]].js

这将匹配 /, /posts, /posts/123, /posts/a/b/c 等。

6. 动态 API 路由

动态路由也适用于 API 路由：

pages/api/posts/[id].js

这允许你创建动态的 API 端点。

7. 预渲染和动态路由

对于动态路由，Next.js 提供了两种预渲染方法：静态生成（SSG）和服务器端渲染（SSR）。

7.1 静态生成

使用 getStaticPaths 和 getStaticProps：

// pages/posts/[id].js
export async function getStaticPaths() {
   
   
  // 返回可能的路径列表
  return {
   
   
    paths: [
      {
   
    params: {
   
    id: '1' } },
      {
   
    params: {
   
    id: '2' } },
    ],
    fallback: false
  }
}

export async function getStaticProps({
    
     params }) {
   
   
  // 获取具体的帖子数据
  const res = await fetch(`https://api.example.com/posts/${
     
     params.id}`)
  const post = await res.json()

  return {
   
    props: {
   
    post