getStatic Path not working for base URL "/" in NextJS

Question

I'm using Prismic and NextJS for the first time.

What I'm trying to is make it so when the user goes to the base url for the page localhost:3000/ in dev something will load. /About and /Pricing are working fine the base url doesn't work.

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,
  };

}

or to simplify it further

[[...pagePath]].tsx fails when going to localhost:3000/ but does not fail on localhost:3000/about or localhost:3000/pricing.

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,
  };

}

Answer 1

If you are using Create-T3-App

https://github.com/t3-oss/create-t3-app

then

your next.config.mjs will default to this as of Nov 7, 2022

const config = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
};
export default config;

remove

const config = {
  reactStrictMode: true,
  swcMinify: true,
  //i18n: {
  //  locales: ["en"],
  //  defaultLocale: "en",
  //},
};
export default config;

This will make default "/" pathing work, if you require i18n, I'm sorry I can't help.

Answer 2

As far as I can see your'e not fetching the right way. In order to to have a clean project I would recommend to use a const var where you can determine between dev and production enviorenment. To do so you can simply create a file for example: constants.js containing the following:

export const baseurl = process.env.NODE_ENV === "production"
    ? process.env.NEXT_PUBLIC_DOMAIN // <-- your domain on live
    : "http://localhost:3000"; // localhost on dev

Now with this you automatically have localhost on your dev. Notice that you need http:// which your'e missing at the moment. Now the next example shows you how to fetch something on your root / by entering the following code:

import { baseurl } from "../utils/constants"; // <-- importing the constant

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch(`${baseurl}/api/posts`)
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}