Question 73628 in Reactjs Question posted in
The new location for the React Documentation can be found here.

My NextJS server is crashing with nested dynamic routes – Reactjs

So I’m quite new to the NextJS space, I was using plain react before, but I’ve found the need for ISR, so I came to NextJS since its so far been an alright transition.

What I have is the following structure of routes:
/tutorials/minecraft/[version]/[tutorial]

Now what I need to do is gather data using those 2 dynamic parts (the version and tutorial). I’ve tried lots of different things, messing around with the useRouter and stuff. But it always gives me some kind of issue.

Right now, this is what I have (a simplified version, because there’s a lot of content stuff going on below that I know is perfectly fine):

const getTutorial = async (version, tutorial) => {
    console.log("Server side props: " + version + " " + tutorial);
    const response = await fetch(
        `https://raw.githubusercontent.com/DaRealTurtyWurty/Minecraft-Tutorials/main/${version}/${tutorial}.json`,
        {
            next: { revalidate: 10 }
        }
    );

   return await response.json();
}

export default async function Page({ params }) {
    let tutorialData = await getTutorial(params.version, params.tutorial);
    let content = deserialize(tutorialData);

    return <div>
        {content}
    </div>
}

This is what happens in the console:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

event - compiled client and server successfully in 1821 ms (263 modules)
wait  - compiling...
wait  - compiling /tutorials/minecraft/[version]/[tutorial]/page (client and server)...

PS E:turtywurty-dev-next>

It just crashes. No errors or anything, neither on the server nor the browser. I’ve tried many things, using the router to get params and etc. But nothing has helped, it still crashes.

Edit: For clarification, with and without getServerSideProps, the same thing happens.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out the issue was actually nothing to do with the nested dynamic routes. It was actually to do with the components I was using that weren't updated to support nextjs13, as they weren't specified as client. I'm not sure why the error was hidden from this, and why it just straight up terminated the process. But, I suppose that is betas for you.


  2. 0

    In the app directory there is no getServerSideProps export function which passes props to your component, you need to fetch data inside your component by your own and await it. This could look something like this:

    // app/tutorials/minecraft/[version]/[tutorial]/page.tsx

const getData = async (version, tutorial) => {
  const response = await fetch(
    `https://raw.githubusercontent.com/DaRealTurtyWurty/Minecraft-Tutorials/main/${version}/${tutorial}.json`,
    {
      next: { revalidate: 10 },
    }
  );

  const data = await response.json();
  return {
    tutorialData: data,
  };
};

export default async function Page({ params: { version, tutorial } }) {
  const { tutorialData } = await getData(version, tutorial);
  const content = JSON.stringify(tutorialData);
  return <div>{content}</div>;
}

    For more information, please have a look at the new Nextjs 13 beta documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search