Yup getServerSideProps is the best practice in nextjs case

thanks i'm using that. now, what is the proper way to get parameters from the url? something like below?

export const getServerSideProps: GetServerSideProps<{product: IArticleResult}> = async (context) => {
  const { params } = context;
  const id:string = params?.id;
  // ...
}

if this is the way to go, how do i solve that:

Type 'string | string[] | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

what are the cases where id can be string[]?

note that by id i'm expecting to get the value from query string such as ?id=xxxx

if this isn't proper way, please let me know, i'm getting to know nextjs. thanks in advance

I don’t remember exactly anymore but a few cases come to mind

1. Catch-all routes […slug].tsx then slug is an array of string
2. /path?a=1&a=2
3. A combination of [id] and ?id=

But i dont recall exactly so make a test page and test all these three cases

I see i have this issue now. i'm trying to read the parameter like below but param itself is undefined. what am i missing?

from this piece of code:

export const getServerSideProps: GetServerSideProps<{product: IArticleResult}> = async (context) => {
  const { params } = context;
  const id: string = params?.id as string || "";
  
  console.log('getServerSideProps says, params = ', params);

full code goes like this:

import { GetServerSideProps, NextPage, NextPageContext  } from 'next';
import IArticleResult from '@interfaces/IArticleResult';
import IArticle from '@/interfaces/IArticle';

interface PropductProps {
  product: IArticleResult;
}

const Index = (props: PropductProps) => {
  return(<div>the title is {props.product.result![0].title}</div>)
}

export const getServerSideProps: GetServerSideProps<{product: IArticleResult}> = async (context) => {
  const { params } = context;
  const id: string = params?.id as string || "";
  
  console.log('getServerSideProps says, params = ', params);
  console.log('getServerSideProps says id = ', id);

  if(id.length === 0) {
    return {
      notFound: true
    }
  }

  // Fetch the article data from the database using the ID
  const articleData: IArticleResult = await fetchArticleFromDatabase(id);

  // Pass the article data as props to the page component
  return {
    props: {
      product: articleData,
    },
  };
};

async function fetchArticleFromDatabase(id: string): Promise<IArticleResult> {
  const response = await fetch(`/api/read_article?id=${id}`);
  const data = await response.json();
  return data;
}

export default Index;

got it! the file should be name [id].tsx then i can do /articles/123

Correct

how do i close the question?