文档

verval 出品；静态生成、服务器渲染。react 的上层框架。助力 serverless、ssr 等现代功能，提升 SEO 性能与页面性能

App Router

next 路由算是把文件目录和项目路由进行了统一的映射规范。文件路径即是项目路由

next 最新的路由模式。所有组件都为 服务器组件，服务器组件主要负责数据获取与页面展示。在文件顶部声明'use client' 的组件为客户端组件。客户端组件主要处理用户交互，与使用 hook 能力(onClick、useState...)

每个文件夹代表一个映射到 URL 段的路由段，页面就是每个文件夹下的 page.js(<font style="color:rgb(51, 51, 51);">page.jsx</font>) 中通过 export default 导出的函数组件

Loayout 与 template

布局(<font style="color:rgb(51, 51, 51);">Loayout</font>)是在多个页面之间共享的 UI。在导航时，布局会保留状态、保持交互并且不会重新呈现。布局也可以嵌套。

模板(template)类似于布局，因为它们包装每个子布局或页面，在导航时，会重新创建 DOM 元素，不保留状态。适合有进入/退出动画的布局。

路由跳转

通过 next 的 <Link/>

import Link from "next/link";

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>;
}

通过 next/navigation 的 useRouter，hook 与 dom 事件 只能在 客户端组件中使用

"use client";

import { useRouter } from "next/navigation";

export default function Page() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push("/dashboard")}>
      Dashboard
    </button>
  );
}

在不影响 URL 路径的情况下组织路由

<font style="color:rgb(51, 51, 51);">路由组</font>：括号中的文件夹将从 URL 中省略（例如 (marketing) 或 (shop)），所有不会加入 URL 路由中。意图只是让项目架构更清晰与工整

动态路由

可以通过将文件夹名称括在方括号中来创建动态细分：<font style="color:rgb(51, 51, 51);">[folderName]</font>。例如，<font style="color:rgb(51, 51, 51);">[id]</font> 或 [<font style="color:rgb(51, 51, 51);">slug]</font>。更多用法

文件目录	访问 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’ }

在动态目录的page.jsx中，next 会把路由参数作为组件 props 导入

type paramsType = {
  // 第一个string为动态路由的文件名 [this]
  params: Record<string, string>;
  searchParams: Record<string, string>;
};
export default function Post(params: paramsType) {
  return <div>params: {JSON.stringify(params)}</div>;
}

例子