Next.js - 页面

Next.js - 使用 App Router 创建页面

在现代 Next.js 中，我们使用 App Router 创建网页。该系统利用 app 目录内的文件夹和特殊文件来定义路由。你可以将其想象成管理计算机上的文件，其中每个文件夹代表 URL 的一部分。

Next.js 中的“页面”是从 page.tsx（或 page.js、page.jsx）文件中导出的 React 服务器组件。路由由文件在 app 目录中的位置决定。

• app/page.tsx 对应于根路由 (’/’)。
• app/dashboard/settings/page.tsx 对应于 ‘/dashboard/settings’ 路由。

如果你尚未创建，请创建一个基本的 Next.js 项目。打开你的终端并运行：

npx create-next-app@latest my-next-app
cd my-next-app

按照提示操作，确保选择 TypeScript 和 App Router（这是默认选项）。

现在，我们来创建一个新页面。在 app 目录内创建一个名为 posts 的文件夹。在 app/posts/ 中，创建一个名为 page.tsx 的文件，内容如下：

app/posts/page.tsx

export default function PostsPage() {
  return (
    <main>
      <h1>All Posts</h1>
      <p>This is where a list of posts would go.</p>
    </main>
  );
}

要实现页面间的导航而无需完整的页面重新加载（客户端导航），我们使用从 next/link 导入的 Link 组件。让我们从主页（app/page.tsx）添加一个链接到新的文章页面。

更新 app/page.tsx：

app/page.tsx

import Link from 'next/link';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>Explore our content:</p>
      <Link href="/posts">Go to Posts</Link>
    </main>
  );
}

现在，让我们从文章页面添加一个链接返回主页。更新 app/posts/page.tsx：

app/posts/page.tsx

import Link from 'next/link';

export default function PostsPage() {
  return (
    <main>
      <h1>All Posts</h1>
      <p>This is where a list of posts would go.</p>
      <Link href="/">Back to Home</Link>
    </main>
  );
}

启动开发服务器

在你的项目根目录中运行以下命令：

npm run dev

你将看到类似于以下的输出：

> my-next-app@0.1.0 dev
> next dev

  ▲ Next.js 14.x.x
  - Local:        http://localhost:3000

 ✓ Ready in x.xms
 ○ Compiling / ...
 ✓ Compiled / in x.xms

验证输出

在浏览器中打开 http://localhost:3000。你应该看到主页，其中包含“Welcome to Next.js!”标题和“Go to Posts”链接。

点击“Go to Posts”链接。URL 应该变为 /posts，你将看到“All Posts”页面内容，包括“Back to Home”链接。注意导航速度很快，因为它是 Next.js 在客户端处理的。