Next.js访问站点根路径时如何返回指定slug的动态路由页面

Next.js 的动态路由规则无法匹配根路径（/），因此无法直接通过修改[page].js实现需求，你可以选择以下两种兼容现有逻辑的方案实现：

方案1：配置重定向（最简实现） #

直接在项目根目录的next.config.js中添加重定向规则，用户访问根路径时自动映射到homepage对应的动态路由：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/homepage',
        permanent: true, // 为true返回301永久重定向适合SEO，为false返回302临时重定向
      },
    ]
  },
}

注意使用该方案需要确保getStaticPaths已经返回了slug为homepage的路径，否则会触发404。

方案2：新增根路径页面（保持URL为根路径） #

如果不希望地址栏跳转显示/homepage，可以新增src/pages/index.js文件，直接复用现有页面逻辑单独拉取首页数据：

// src/pages/index.js
import React from "react";
import { fetchAPI } from "../lib/api";
// 复用现有[page].js的组件逻辑，无需重复开发
import Page from './[page]';

export default Page;

export async function getStaticProps() {
  const pages = await fetchAPI(`/pages?slug=homepage`);
  return {
    props: { page: pages[0] },
    revalidate: 1,
  };
}

该方案访问根路径时地址栏始终显示为example.com，更符合常规站点的使用习惯。

内容的提问来源于stack exchange，提问作者Chrish D