Search code examples
reactjsnext.jsnested-routesdynamic-routingnext.js13

My NextJS server is crashing with nested dynamic routes


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.


Solution

  • 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.