当前位置：首页 > 文章列表 > 文章 > 前端 > Nextjs 中的路由 – 如何在您的下一个应用程序中使用 App Router

Nextjs 中的路由 – 如何在您的下一个应用程序中使用 App Router

2025-01-22 17:51:55 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Nextjs 中的路由 – 如何在您的下一个应用程序中使用 App Router》，聊聊，我们一起来看看吧！

Next.js 14 的 App Router 引入了一种基于文件的路由方法，让开发者构建更结构化、模块化且高性能的应用。本文将指导您如何在 Next.js 应用中有效使用 App Router。

什么是 App Router？

App Router 提供了一种全新的路由定义方式。只需创建组件即可定义路由，/app 目录下的每个文件夹都对应一个 URL 路径。这种组织方式支持嵌套布局和分组路由，在处理大型应用时更易于数据获取和路由管理。

设置 App Router

创建新的 Next.js 项目 (若尚未创建): npx create-next-app@latest
启用 App Router: Next.js 14 默认使用 /app 目录，自动启用 App Router，无需额外配置。

基本路由

/app 目录下的每个文件夹和文件都自动映射到应用中的路径。

<code>app/
 ├── page.tsx           # 首页 (例如： "/")
 ├── about/
 │    └── page.tsx      # 关于页面 (例如： "/about")
 └── blog/
      ├── page.tsx      # 博客索引页 (例如： "/blog")
      └── [slug]/
           └── page.tsx # 动态博客文章 (例如： "/blog/my-post")</code>

静态路由: app/about/page.tsx 自动映射到 /about 路径。
动态路由: 使用方括号 [] 创建动态路由。例如，app/blog/[slug]/page.tsx 将动态渲染 /blog/my-first-post 或 /blog/hello-world 等路径的页面。

布局和嵌套

App Router 允许您在一个位置定义布局并在不同页面中复用，轻松实现应用各个部分的 UI 元素一致性。

创建布局:

在文件夹中添加 layout.tsx 文件即可创建布局。该布局将应用于该文件夹内的所有页面和组件。

<code>app/
 ├── layout.tsx         # 应用根布局
 ├── about/
 │    ├── layout.tsx    # 关于页面特定布局
 │    └── page.tsx      # 关于页面内容</code>

// app/contact/page.tsx
"use client";

import { useForm } from 'react-hook-form';

export default function ContactForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = async (data) => {
    "use server";
    await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* ...表单内容... */}
      <input type="submit" value="提交" />
    </form>
  );
}