MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Next.js中定义页面与URL路径的最佳实践

2022-08-043.5k 阅读

Next.js 中定义页面与 URL 路径的最佳实践

一、Next.js 页面系统基础

在 Next.js 中，页面是构建应用程序的核心单元。每个页面都是一个 React 组件，同时也对应着一个特定的 URL 路径。这种紧密的关联使得构建具有良好结构和用户体验的 Web 应用变得更加容易。

1.1 页面文件结构

Next.js 采用基于文件系统的路由系统。默认情况下，pages 目录下的每个文件都对应一个页面。例如，在 pages/about.js 中定义的组件，将映射到 /about 路径。下面是一个简单的 about.js 页面示例：

import React from'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of our application.</p>
    </div>
  );
};

export default About;

这里，About 组件定义了关于页面的 UI 呈现。当用户访问 /about 时，Next.js 会自动渲染这个组件。

1.2 动态路由

动态路由允许我们创建根据不同参数变化的页面。在 Next.js 中，通过在文件名中使用方括号 [] 来定义动态路由。例如，pages/post/[id].js 表示一个动态页面，其中 id 是一个动态参数。

下面是一个简单的动态页面示例，用于显示特定文章：

import React from'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
};

export default Post;

在上述代码中，通过 useRouter 钩子获取路由对象，然后从 router.query 中提取 id 参数。这样，当用户访问 /post/1、/post/2 等不同路径时，页面会根据 id 的值显示相应内容。

二、嵌套路由与子页面

Next.js 支持嵌套路由，这在构建复杂应用时非常有用。通过在 pages 目录下创建子目录，可以轻松实现嵌套路由结构。

2.1 简单嵌套路由

假设我们有一个博客应用，除了文章详情页面，还有文章分类页面。我们可以这样组织文件结构：

pages/
├── blog/
│   ├── [category]/
│   │   └── [id].js
│   └── index.js
└── index.js

这里，blog/index.js 可以作为博客列表页面，blog/[category]/[id].js 用于显示特定分类下的特定文章。

blog/index.js 示例：

import React from'react';

const BlogIndex = () => {
  return (
    <div>
      <h1>Blog Index</h1>
      <p>This is the list of all blog posts.</p>
    </div>
  );
};

export default BlogIndex;

blog/[category]/[id].js 示例：

import React from'react';
import { useRouter } from 'next/router';

const CategoryPost = () => {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <div>
      <h1>Post {id} in {category}</h1>
      <p>This is the content of post {id} in {category} category.</p>
    </div>
  );
};

export default CategoryPost;

这样，当用户访问 /blog 时，会看到博客列表页面；访问 /blog/javascript/1 时，会看到 JavaScript 分类下的文章 1。

2.2 处理嵌套路由中的布局

在嵌套路由中，通常需要为子页面定义统一的布局。可以通过在父目录下创建 _layout.js 文件来实现。例如，在 blog 目录下创建 _layout.js：

import React from'react';
import Head from 'next/head';

const BlogLayout = ({ children }) => {
  return (
    <div>
      <Head>
        <title>My Blog</title>
      </Head>
      <header>
        <h1>My Blog</h1>
      </header>
      {children}
      <footer>
        <p>Copyright © 2024</p>
      </footer>
    </div>
  );
};

export default BlogLayout;

这里，BlogLayout 组件接收 children 属性，将子页面的内容渲染在布局中。这样，blog 目录下的所有子页面（index.js 和 [category]/[id].js）都会应用这个布局。

三、自定义 URL 路径

虽然 Next.js 的基于文件系统的路由系统很方便，但有时我们可能需要自定义 URL 路径，以满足特定的业务需求或 SEO 优化。

3.1 使用 next.config.js 配置重定向

通过 next.config.js 文件中的 redirects 配置项，可以实现简单的 URL 重定向。例如，将旧的文章路径重定向到新的路径：

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-post/:id',
        destination: '/new-post/:id',
        permanent: true,
      },
    ];
  },
};

在上述配置中，source 是旧的 URL 模式，destination 是新的 URL 模式。permanent 设置为 true 表示这是一个永久重定向，设置为 false 则是临时重定向。

3.2 自定义路径别名

有时候，我们希望使用更友好的 URL 别名。可以通过 next.config.js 中的 rewrites 配置项来实现。例如，将 /article/:id 重写为 /posts/:id：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/posts/:id',
        destination: '/article/:id',
      },
    ];
  },
};

这里，用户访问 /posts/1 时，实际上会被重写为 /article/1，但浏览器地址栏仍显示 /posts/1，这对于 SEO 和用户体验都有好处。

四、处理 404 页面

在任何 Web 应用中，处理 404 页面都是必不可少的。在 Next.js 中，创建一个 pages/404.js 文件即可定义自定义的 404 页面。

import React from'react';

const NotFound = () => {
  return (
    <div>
      <h1>404 - Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
};

export default NotFound;

当 Next.js 无法找到与请求 URL 对应的页面时，会自动渲染这个 404 页面。

五、预渲染与静态生成中的路径处理

Next.js 支持两种主要的预渲染模式：静态生成（Static Generation）和服务器端渲染（Server - Side Rendering）。在这两种模式下，URL 路径的处理略有不同。

5.1 静态生成中的路径

静态生成（getStaticProps）时，我们可以在构建时生成页面的 HTML。对于动态路由页面，我们可以通过 getStaticPaths 函数来指定需要生成的路径。

例如，对于一个博客文章页面 pages/post/[id].js：

import React from'react';
import { getAllPosts } from '../lib/api';

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await getPostById(params.id);
  return {
    props: {
      post,
    },
  };
}

export default Post;

在 getStaticPaths 中，我们获取所有文章，并为每篇文章生成一个路径。fallback 设置为 false 表示只生成指定路径的页面，其他路径会返回 404。如果设置为 true，当用户访问未生成的路径时，Next.js 会在请求时生成页面。

5.2 服务器端渲染中的路径

在服务器端渲染（getServerSideProps）模式下，页面是在每次请求时渲染的。因此，不需要像静态生成那样提前指定路径。

例如，同样是博客文章页面：

import React from'react';
import { getPostById } from '../lib/api';

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const post = await getPostById(params.id);
  return {
    props: {
      post,
    },
  };
}

export default Post;

这里，每次用户请求文章页面时，getServerSideProps 都会根据请求的 id 参数获取相应的文章数据并渲染页面。

六、优化 URL 路径以提升 SEO

优化 URL 路径对于提升网站在搜索引擎中的排名非常重要。

6.1 使用描述性路径

尽量使用描述性的路径，避免使用无意义的数字或字符。例如，/article/introduction - to - nextjs 比 /article/123 更有利于 SEO。

6.2 保持路径简洁

避免路径过长或过于复杂。简洁的路径更容易被搜索引擎理解和用户记忆。例如，/blog/react - tips 比 /blog/category/front - end/react - programming - tips - and - tricks 更合适。

6.3 处理 URL 中的特殊字符

在 URL 中，特殊字符需要进行编码。Next.js 会自动处理一些常见的情况，但在自定义路径时需要注意。例如，空格应编码为 %20，但在可能的情况下，最好使用连字符 - 代替空格。

七、在 Next.js 应用中处理国际化路径

随着应用的全球化，处理国际化路径变得越来越重要。Next.js 可以通过一些插件和配置来实现国际化路径。

7.1 使用 next - i18next 插件

安装 next - i18next：

npm install next - i18next

然后在项目中进行配置。首先，创建一个 i18n.js 文件：

import i18n from 'i18next';
import { initReactI18next } from'react - i18next';
import Backend from 'i18next - http - backend';
import LanguageDetector from 'i18next - browser - language - detector';

i18n
 .use(Backend)
 .use(LanguageDetector)
 .use(initReactI18next)
 .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

接着，在 next.config.js 中配置：

const { i18n } = require('./next - i18next.config');

module.exports = {
  i18n,
};

在页面中，可以通过 next - i18next 提供的钩子和组件来实现多语言支持，并且可以根据语言设置不同的 URL 前缀。例如，/en/about、/zh/about 等。

7.2 自定义国际化路径规则

除了使用插件，也可以自定义国际化路径规则。可以在路由配置或服务器端处理中，根据用户的语言偏好或请求头信息，重写 URL 路径。例如，通过中间件在服务器端根据 Accept - Language 请求头来重写路径。

八、在 Next.js 应用中与后端 API 集成时的路径处理

当 Next.js 应用与后端 API 集成时，路径处理需要协调好前端和后端的路由。

8.1 相对路径与绝对路径

在前端调用后端 API 时，可以使用相对路径或绝对路径。相对路径在开发和部署到同一域名下时很方便，例如：

fetch('/api/posts');

这里，/api/posts 是相对于前端应用的根路径。如果后端 API 部署在不同的域名下，就需要使用绝对路径：

fetch('https://api.example.com/posts');

8.2 处理 API 版本控制

在 API 发展过程中，可能需要进行版本控制。一种常见的做法是在 API 路径中包含版本号，例如 /api/v1/posts、/api/v2/posts。在 Next.js 前端调用时，需要根据实际的 API 版本来调整路径。可以通过配置文件或环境变量来管理 API 版本路径，以便在不同环境（开发、测试、生产）中灵活切换。

8.3 代理 API 请求

在开发过程中，为了避免跨域问题，可以使用代理来转发 API 请求。在 next.config.js 中配置代理：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:3001/api/:path*',
      },
    ];
  },
};

这里，将前端对 /api 开头的请求代理到 http://localhost:3001/api，假设后端 API 运行在这个地址。这样在开发时就可以避免跨域问题，同时保持前端 API 调用路径的一致性。

九、在 Next.js 中处理动态路径参数的验证与转换

在动态路由中，获取到的路径参数可能需要进行验证和转换，以确保应用的正确性和安全性。

9.1 验证参数类型

例如，对于一个接受数字 id 的动态路由 pages/post/[id].js，可以在页面组件中验证 id 是否为数字：

import React from'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  const validId = typeof id ==='string' &&!isNaN(parseInt(id));

  if (!validId) {
    return (
      <div>
        <h1>Invalid ID</h1>
        <p>The provided ID is not a valid number.</p>
      </div>
    );
  }

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
};

export default Post;

这里，通过 typeof 和 isNaN 来验证 id 是否为有效的数字。如果不是，则显示错误信息。

9.2 转换参数

有时需要对路径参数进行转换。比如，将字符串形式的日期参数转换为 Date 对象。假设我们有一个 pages/events/[date].js 页面：

import React from'react';
import { useRouter } from 'next/router';

const Event = () => {
  const router = useRouter();
  const { date } = router.query;
  const eventDate = new Date(date);

  return (
    <div>
      <h1>Event on {eventDate.toDateString()}</h1>
      <p>This is the event details for {date}.</p>
    </div>
  );
};

export default Event;

这里，将路径参数 date 转换为 Date 对象，以便在页面中进行日期相关的操作和显示。

十、在 Next.js 应用中进行路径导航的最佳实践

在 Next.js 应用中，实现良好的路径导航对于用户体验至关重要。

10.1 使用 next/link 组件

next/link 组件是 Next.js 提供的用于导航的组件。它会在客户端进行路由切换，避免页面的完全刷新，提升用户体验。例如：

import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

这里，通过 Link 组件创建了到首页和关于页面的导航链接。

10.2 动态导航

在动态路由场景下，Link 组件同样适用。例如，在博客列表页面中，为每篇文章创建导航链接：

import React from'react';
import Link from 'next/link';
import { getAllPosts } from '../lib/api';

const BlogList = () => {
  const posts = getAllPosts();

  return (
    <div>
      <h1>Blog List</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link href={`/post/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BlogList;

这里，根据文章数据动态生成到每篇文章详情页面的链接。

10.3 处理导航中的状态管理

在复杂应用中，导航可能会涉及到状态管理。例如，导航到一个新页面时，需要更新全局状态。可以结合状态管理库（如 Redux、MobX 等）来实现。例如，在 Redux 中，导航到购物车页面时，可以触发一个 action 来更新购物车的显示状态：

import React from'react';
import Link from 'next/link';
import { useDispatch } from'react - redux';
import { showCart } from '../store/actions';

const Navbar = () => {
  const dispatch = useDispatch();

  const handleCartClick = () => {
    dispatch(showCart());
  };

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/cart" onClick={handleCartClick}>
            Cart
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

这里，点击购物车链接时，触发 showCart action，更新购物车的显示状态。

十一、在 Next.js 应用中测试页面与 URL 路径

对页面和 URL 路径进行测试是保证应用质量的重要环节。

11.1 单元测试动态路由组件

对于动态路由组件，可以使用测试框架（如 Jest 和 React Testing Library）进行单元测试。例如，对于 pages/post/[id].js 组件：

import React from'react';
import { render, screen } from '@testing - library/react';
import Post from '../pages/post/[id]';
import { MemoryRouter } from'react - router - dom';

describe('Post Component', () => {
  test('renders post title', () => {
    const { id } = { id: '1' };
    render(
      <MemoryRouter initialEntries={[`/post/${id}`]}>
        <Post />
      </MemoryRouter>
    );
    const titleElement = screen.getByText(`Post ${id}`);
    expect(titleElement).toBeInTheDocument();
  });
});

这里，使用 MemoryRouter 模拟路由环境，测试 Post 组件是否正确渲染文章标题。

11.2 集成测试页面导航

可以使用 Cypress 等工具进行集成测试，测试页面之间的导航是否正常。例如，测试从首页导航到关于页面：

describe('Navigation', () => {
  it('navigates to about page', () => {
    cy.visit('/');
    cy.get('a[href="/about"]').click();
    cy.url().should('include', '/about');
  });
});

这里，通过 Cypress 访问首页，点击关于页面的链接，然后验证 URL 是否包含 /about，以此测试导航功能是否正常。

11.3 测试 404 页面

同样可以使用 Cypress 测试 404 页面是否正确显示。例如：

describe('404 Page', () => {
  it('shows 404 page for non - existent route', () => {
    cy.visit('/non - existent - page');
    cy.get('h1').should('contain', '404 - Not Found');
  });
});

这里，访问一个不存在的路径，然后验证页面是否显示 404 标题。

通过以上各种测试方法，可以确保 Next.js 应用中页面与 URL 路径的正确性和稳定性。

十二、在 Next.js 应用中部署时的路径相关注意事项

在将 Next.js 应用部署到生产环境时，有一些与路径相关的注意事项。

12.1 基础路径配置

如果应用需要部署在非根路径下，例如 https://example.com/app，可以在 next.config.js 中配置 basePath：

module.exports = {
  basePath: '/app',
};

这样，Next.js 会在生成的所有链接和资源路径前加上 /app。同时，在 next/link 组件和 next/router 中也会自动处理这个基础路径。

12.2 处理服务器端渲染的路径

如果应用使用了服务器端渲染，需要确保服务器配置正确处理请求路径。例如，在使用 Node.js 和 Express 作为服务器时，需要正确配置路由，将请求转发到 Next.js 应用。

const express = require('express');
const next = require('next');

const app = next({ dev: process.env.NODE_ENV!== 'production' });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

这里，Express 服务器将所有请求转发给 Next.js 应用处理，确保正确的路径处理和渲染。

12.3 静态文件路径

在部署时，确保静态文件（如 CSS、图片等）的路径正确。Next.js 会自动处理静态文件的路径，但在自定义配置或使用 CDN 时需要特别注意。可以在 next.config.js 中配置 assetPrefix 来指定静态文件的前缀路径。例如：

module.exports = {
  assetPrefix: 'https://cdn.example.com',
};

这样，所有静态文件的路径都会以 https://cdn.example.com 为前缀，确保在生产环境中能够正确加载。

通过正确处理部署时的路径相关问题，可以保证 Next.js 应用在生产环境中的正常运行和良好用户体验。