了解Next.js App Router

📅

loading..🐩🐩🐩🐩

开始之前 🔗

来试试Next.js从版本13开始支持的App Router。

Next.js采用文件系统路由，因此应用的路由由文件结构决定。

App Router支持Server Components、Server Actions和Suspense等技术。

这篇文章介绍它的基本用法。

设置根页面 🔗

可以使用默认生成的app/目录中的page.tsx和layout.tsx文件，配置根路径（/）。

app/layout.tsx

export default function RootLayout({children,}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>{children}</body> 
	{/* html, body 태그를 사용하여 레이아웃을 구성*/}
	{/* children은 page.tsx 내부의 컴포넌트를 받아서 레이아웃을 구성한다. */}
    </html>
  )
}

app/page.tsx

export default function Page() {
	return <p>Root Page</p>
}

👨‍💻

即使没有

layout.tsx

文件，Next.js也会在启动时自动生成布局。

执行npm run dev后访问http://localhost:3000/↗，页面会显示Root Page。

定义路由 🔗

如前文所述，Next.js采用文件系统路由，因此路由由文件和文件夹结构决定。

在app/下创建子文件夹，就可以建立路由。

app/example/page.tsx

export default function ExamplePage() {
	return <p>Example Page</p>
}

执行npm run dev后访问http://localhost:3000/example↗，页面会显示Example Page。

动态路由 🔗

在文件夹名称中使用方括号，就可以定义动态路由。

app/example/[slug]/page.tsx

export default function SlugPage({ params }: { params: { slug: string } }) {
	return <p>{params.slug} Page</p>
}

执行npm run dev后访问http://localhost:3000/example/hello↗，页面会显示hello Page。

使用路由处理器创建API路由 🔗

创建app/api/目录，就可以使用API路由。

app/api/hello.ts

import { NextResponse } from "next/server";
 
export async function GET() {
  return NextResponse.json({ message: "Hello World" });
}

执行npm run dev后访问http://localhost:3000/api/hello↗，会返回{"message":"Hello World"}。

🖐️

route.ts文件不能与page.tsx文件放在同一路径下。

参考资料 🔗

Next.js官方文档↗

了解Next.js App Router | PromleeBlog