Nextjs change url of dynamic path

Question

So I currently have my dynamic path set to show events by id [id].js localhost:3000/event/1

however I'd like it to be: localhost:3000/city/date/title I have all these available in the events database I'm just having trouble wrapping my head around the right way to do this

[id].js

export const getStaticPaths = async () => {
  const { data: events } = await supabase.from("events").select("id");
  const paths = events.map(({ id }) => ({
    params: {
      id: id.toString(),
    },
  }));

  return {
    paths,
    fallback: "blocking",
  };
};

export const getStaticProps = async ({ params: { id } }) => {
  const { data: events } = await supabase
    .from("events")
    .select("*")
    .eq("id", id)
    .single();

  return {
    props: {
      events,
    },
    revalidate: 60,
  };
};```

Does this answer your question: How to generate static pages with nested dynamic routes? — juliomalves
– juliomalves, Commented Oct 3, 2022 at 22:19

Tushar Shahi · Accepted Answer · 2022-10-03 20:29:53Z

2

You are looking for nested dynamic routes

Just create a directory structure like this:

/
   [city]
      [date]
         [title]

For this URL : localhost:3000/delhi/20-09/party your params object would be like :

{ "city": "delhi", "date": "20-09" , title : "party" }

Use like:

export const getStaticProps = async ({ params: { city , date, title } }) => {

Also, getStaticPaths will also need updating. The params you return will include all keys and the code might look like:

export async function getStaticPaths() {
    let paths = await someAsyncMethod();
    //create paths into an array of the shape 
    //{   params : { city : '' , date : '' , title : ''} }[]

    return {
        paths : paths,
        fallback: false
      } 
 }

edited Oct 3, 2022 at 20:29

answered Oct 3, 2022 at 19:38

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ivanatias Over a year ago

OP would also need to define those params in getStaticPaths.

Tushar Shahi Over a year ago

@ivanatias true. Thanks for pointing out, i think i should add that

PDANGER Over a year ago

running into this: A required parameter (city) was not provided as a string in getStaticPaths for /[city]/[date]/[artist] I feel like im close, folder structure is as follows ```/ [city] [date] [artist].js

PDANGER · Accepted Answer · 2022-10-03 22:44:57Z

1

Here's what ended up working for me:

  const { data, error } = await supabase
    .from("events")
    .select("city, date, title");

  const paths = data.map((event) => ({
    params: {
      city: event.city,
      date: event.date,
      title: event.title
  }));

  return { paths, fallback: false };
}

export const getStaticProps = async ({ params }) => {
  const { data, error } = await supabase
    .from("events")
    .select("*")
    .eq("city", params.city)
    .eq("date", params.date)
    .eq("title", params.title);

  return {
    props: {
      events: data[0],
    },
  };
};

Perhaps there's a better way of doing it, but this is how I solved my issue at the end.

answered Oct 3, 2022 at 22:44

PDANGER

871 silver badge12 bronze badges

Collectives™ on Stack Overflow

Nextjs change url of dynamic path

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related