Next.js 动态路由教程

动态路由是 Next.js 中一个非常有用的特性，它允许你根据传入的参数动态生成路由。以下是关于 Next.js 动态路由的基本教程。

基本概念

在 Next.js 中，动态路由通常用于处理用户输入的参数，例如用户名、ID 等。这允许你的应用更灵活地处理不同的页面和内容。

路由配置

要创建一个动态路由，你需要在 pages 目录下创建一个文件，文件名遵循特定的格式。例如，如果你想要一个动态路由 /users/:id，你应该创建一个名为 pages/users/[id].js 的文件。

export default function User({ id }) {
  return (
    <div>
      <h1>User {id}</h1>
      {/* 用户信息渲染 */}
    </div>
  );
}

获取动态参数

在 Next.js 的页面组件中，你可以通过 router 对象的 query 属性来获取动态路由的参数。

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

  return (
    <div>
      <h1>User {id}</h1>
      {/* 用户信息渲染 */}
    </div>
  );
}

404 页面

如果你想要为不存在的动态路由提供 404 页面，你可以创建一个名为 pages/_app.js 的文件，并在其中重写 getInitialProps 方法来处理这种情况。

import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  if (router.isFallback || router.pathname.startsWith('/_next')) {
    return <div>Loading...</div>;
  }

  if (!Component) {
    return <div>404: Page not found</div>;
  }

  return <Component {...pageProps} />;
}

图片示例

Next.js 动态路由示例

更多资源

想要了解更多关于 Next.js 的信息，可以访问我们的官方文档：Next.js 官方文档.

# Next.js Dynamic Routing Tutorial

Dynamic routing is a very useful feature in Next.js that allows you to generate routes dynamically based on input parameters. Below is a basic tutorial on Next.js dynamic routing.

## Basic Concept

In Next.js, dynamic routing is typically used to handle user input parameters, such as usernames, IDs, etc. This allows your application to handle different pages and content more flexibly.

## Routing Configuration

To create a dynamic route in Next.js, you need to create a file in the `pages` directory following a specific format. For example, if you want a dynamic route `/users/:id`, you should create a file named `pages/users/[id].js`.

```javascript
export default function User({ id }) {
  return (
    <div>
      <h1>User {id}</h1>
      {/* Render user information */}
    </div>
  );
}

Getting Dynamic Parameters

In Next.js page components, you can get the parameters of dynamic routes through the query property of the router object.

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

  return (
    <div>
      <h1>User {id}</h1>
      {/* Render user information */}
    </div>
  );
}

404 Page

If you want to provide a 404 page for non-existent dynamic routes, you can create a file named pages/_app.js and overwrite the getInitialProps method to handle this situation.

import { useRouter } from 'next/router';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();

  if (router.isFallback || router.pathname.startsWith('/_next')) {
    return <div>Loading...</div>;
  }

  if (!Component) {
    return <div>404: Page not found</div>;
  }

  return <Component {...pageProps} />;
}

Image Example

Next.js Dynamic Routing Example

More Resources

For more information about Next.js, you can visit our official documentation: Next.js Official Documentation.