Matarialize中文社区-创建第一个页面

创建第一个页面

前端初学者 2024-09-26 17:44:54

296 Next.js 专栏

1. 创建第一个页面

Next.js 使用文件系统路由，pages 文件夹中的每个文件都会自动映射为应用的一个页面。下面我们将创建一个简单的页面并通过 Next.js 的路由系统进行导航。

1.1 创建页面

在项目的 pages 目录下，创建一个新的文件 about.js：

文件路径：pages/about.js

代码：

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of our Next.js application.</p>
    </div>
  );
}

这个简单的页面包含一个标题和一段文字。Next.js 会自动将 about.js 文件映射为 /about 路由。

1.2 查看页面

启动开发服务器：
```
npm run dev
```
在浏览器中访问 http://localhost:3000/about，你将会看到 About 页面。

2. Link 组件进行导航

Next.js 提供了一个内置的 Link 组件，用于在不同页面之间导航，而不需要重新加载整个页面。Link 组件类似于 HTML 中的 <a> 标签，但它在前端进行页面切换，从而提高性能。

2.1 使用 `Link` 组件

我们将修改 pages/index.js 文件，添加一个链接到 About 页面。

打开或编辑 pages/index.js：

代码：

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to our Next.js application!</p>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  );
}

这里我们使用了 Link 组件，并通过 href="/about" 指定了目标页面。Link 组件内部使用了 <a> 标签，但不需要手动写 a 标签，Next.js 会自动处理页面间的跳转。
现在访问 http://localhost:3000，你会看到首页上有一个 "Go to About Page" 的链接。点击链接后，将跳转到 About 页面，页面刷新非常快，因为这是一种前端的导航。

3. 路由系统的基本概念

Next.js 的路由系统是基于文件系统的，位于 pages 文件夹中的文件会自动成为可访问的路由。

3.1 静态路由

每个文件的路径决定了它的 URL 路径：

pages/index.js 对应 /（根页面）。
pages/about.js 对应 /about。
pages/contact.js 对应 /contact。

3.2 动态路由

Next.js 支持动态路由，适用于具有参数的 URL。例如，假设我们要创建一个用户详情页面，可以在 pages 目录下创建一个 [id].js 文件：

创建 pages/user/[id].js：

代码：

import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>User Page</h1>
      <p>User ID: {id}</p>
    </div>
  );
}