NextJS中根路径"/"的getStaticPaths无法正常工作问题

首次使用Prismic和NextJS开发，开发环境下访问根路径localhost:3000/无法加载内容，但/About和/Pricing路径可正常运行。相关代码如下：

完整业务代码 #

import { GetStaticPaths, GetStaticProps } from 'next'
import { SliceZone } from '@prismicio/react'
import * as prismicH from "@prismicio/helpers";


import { createClient,  linkResolver } from '../../prismicio'
import { components } from '../../slices'


interface HomePageProps {
  page: any
}


const HomePage = (props:HomePageProps) => {
  return <SliceZone slices={props.page.data.slices} components={components} />
}

export default HomePage


interface HomePageStaticProps {
  params: any
  previewData:any
}

export async function getStaticProps(props:HomePageStaticProps) {
  console.log("DOES NOT FIRE FOR localhost:3000")
  const client = createClient({ previewData:props.previewData })
  const params = props.params;
  const uid = params?.pagePath?.[params.pagePath.length - 1] || "home";
  const page = await client.getByUID("page", uid);
  return {
    props: {
      page,
    },
  }
}


export const getStaticPaths: GetStaticPaths = async () => {
  const client = createClient();
  const pages = await client.getAllByType("page");
  const paths =  pages.map((page) => prismicH.asLink(page, linkResolver)) as string[];
  console.log(paths) // [ '/pricing', '/about', '/' ]
  return {
    paths,
    fallback: false,
  };

}

简化测试代码（[[...pagePath]].tsx） #

import { GetStaticPaths, GetStaticProps } from 'next'

interface HomePageProps {
  page: string
}


const HomePage = (props:HomePageProps) => {
  return <> {props.page} </>
}

export default HomePage


interface HomePageStaticProps {
  params: any
  previewData:any
}

export async function getStaticProps(props:HomePageStaticProps) {
  const params = props.params;
  const uid = params?.pagePath?.[params.pagePath.length - 1] || "home";
  //const page = await client.getByUID("page", uid);
  return {
    props: {
      page:uid,
    },
  }
}


export const getStaticPaths: GetStaticPaths = async () => {
  const paths = [ '/pricing', '/about', '/' ];
  return {
    paths,
    fallback: false,
  };

}

NextJS的可选捕获所有动态路由[[...pagePath]]，要求路径必须以包含params的对象格式定义，而非直接传入字符串路径。根路径/对应的pagePath参数是空数组，若直接传字符串路径，NextJS无法正确映射到动态路由的参数结构，导致getStaticProps无法触发或参数解析错误。

1. 修正getStaticPaths的路径格式 #

将字符串路径转换为包含params的对象数组，确保每个路径对应正确的pagePath参数：

• 根路径/对应{ params: { pagePath: [] } }
• 子路径如/about对应{ params: { pagePath: ["about"] } }

2. 调整getStaticProps中的UID获取逻辑 #

处理pagePath为空数组的情况，避免读取空数组的索引值，直接返回home作为UID。

修改后的简化测试代码 #

import { GetStaticPaths, GetStaticProps } from 'next'

interface HomePageProps {
  page: string
}

const HomePage = (props:HomePageProps) => {
  return <> {props.page} </>
}

export default HomePage

interface HomePageStaticProps {
  params: any
  previewData:any
}

export async function getStaticProps(props:HomePageStaticProps) {
  const params = props.params;
  // 处理pagePath为空数组的情况
  const uid = params?.pagePath?.length ? params.pagePath[params.pagePath.length - 1] : "home";
  return {
    props: {
      page:uid,
    },
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  // 将字符串路径转换为params对象格式
  const paths = [
    { params: { pagePath: [] } }, // 根路径
    { params: { pagePath: ["about"] } },
    { params: { pagePath: ["pricing"] } },
  ];
  return {
    paths,
    fallback: false,
  };
}

修改后的完整业务代码 #

import { GetStaticPaths, GetStaticProps } from 'next'
import { SliceZone } from '@prismicio/react'
import * as prismicH from "@prismicio/helpers";

import { createClient, linkResolver } from '../../prismicio'
import { components } from '../../slices'

interface HomePageProps {
  page: any
}

const HomePage = (props:HomePageProps) => {
  return <SliceZone slices={props.page.data.slices} components={components} />
}

export default HomePage

interface HomePageStaticProps {
  params: any
  previewData:any
}

export async function getStaticProps(props:HomePageStaticProps) {
  const client = createClient({ previewData:props.previewData })
  const params = props.params;
  // 处理pagePath为空数组的情况
  const uid = params?.pagePath?.length ? params.pagePath[params.pagePath.length - 1] : "home";
  const page = await client.getByUID("page", uid);
  return {
    props: {
      page,
    },
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const client = createClient();
  const pages = await client.getAllByType("page");
  
  // 将Prismic返回的路径转换为符合动态路由要求的params对象
  const paths = pages.map((page) => {
    const url = prismicH.asLink(page, linkResolver);
    if (url === "/") {
      return { params: { pagePath: [] } };
    } else {
      // 提取路径中的uid部分（假设路径为/xxx格式）
      const pagePath = url.slice(1).split("/");
      return { params: { pagePath } };
    }
  });
  
  console.log(paths)
  return {
    paths,
    fallback: false,
  };
}

修改后重新运行开发服务器，访问localhost:3000/时，getStaticProps会正确触发，获取到uid为home的Prismic页面内容，根路径可正常加载。

内容的提问来源于stack exchange，提问作者Some Guy Trying To Do Math