Next.js dynamic router path bug All In One

markdown

daynamic router

bug

why below code not work at all ?

dynamic router path screenshot

// [title].js

export async function getStaticPaths() {
  const ids = await getPostsIds();
//   ids[0] =
//     {
//       id: '/Users/xgqfrms-mm/Documents/github/nextjs-ssr/posts/markdown.md',
//       year: '2022',
//       month: '12',
//       day: '31',
//       title: 'last'
//    }
  const paths = ids.map(({id, year, month, day, title}) => ({
    params: {
      // id can not pass `id` with params ❌
      id,
      year,
      month,
      day,
      title,
    },
    // can not pass `id` by using key out of `params` ❌❌
    id,
  }));
  return {
    paths,
    fallback: false,
  };
}


export async function getStaticProps({ params, id }) {
  console.log(`params without id =`, params);
  // params without id = {
  //   params: { year: '2022', month: '12', day: '31', title: 'last' },
  //   locales: undefined,
  //   locale: undefined,
  //   defaultLocale: undefined
  // }
  // both not work ❌
  // const data = await getPostsData(params.id);
  const data = await getPostsData(id);
  return {
    props: {
      postData: data,
    },
  };
}

hack way find id ✅


// [title].js

export async function getStaticPaths() {
  const ids = await getPostsIds();
  const paths = ids.map(({id, year, month, day, title}) => ({
    params: {
      year,
      month,
      day,
      title,
    },
  }));
  return {
    paths,
    fallback: false,
  };
}


export async function getStaticProps({ params }) {
  // hack way find id ✅ 
  const ids = await getPostsIds();
  const obj = ids.find(obj => {
    if(obj.year === params.year && obj.month === params.month && obj.day === params.day && obj.title === params.title) {
      return obj;
    }
  });
  const data = await getPostsData(obj.id);
  return {
    props: {
      postData: data,
    },
  };
}

solution ???

import type { ParsedUrlQuery } from 'querystring'
import type { GetStaticPaths, GetStaticProps } from 'next'
import type { Product } from '../types'

import { PHASE_PRODUCTION_BUILD } from 'next/constants'
import { Layout, Page, Link } from '@vercel/examples-ui'

import api from '../api'
import ProductCard from '../components/ProductCard'

interface Props {
  product: Product
}

interface Query extends ParsedUrlQuery {
  id: string
}

export const getStaticPaths: GetStaticPaths<Query> = async () => {
  const products = await api.list()

  if (process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD) {
    await api.cache.set(products)
  }

  return {
    paths: products.map((product) => ({
      params: {
        id: product.id,
      },
    })),
    fallback: 'blocking',
  }
}

export const getStaticProps: GetStaticProps<Props, Query> = async ({
  params,
}) => {
  let product = await api.cache.get(params?.id as string)

  if (!product) {
    product = await api.fetch(params?.id as string)
  }

  if (!product) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      product,
    },
  }
}

function Home({ product }: Props) {
  return (
    <Page>
      <section className="flex flex-col gap-6 items-center">
        <ProductCard product={product} />
        <Link href="/">Go back to index</Link>
      </section>
    </Page>
  )
}

Home.Layout = Layout

export default Home