Next.js Discord

Discord Forum

Dynamic Routing with App Router

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Hello!

I've started my first project with the app router and i'm running into an issue with client side dynamic routes.

I am building a form that takes a slug as the ID for the form topic. This works great on the local dev environment, but when i publish it to firebase hosting, the slug always 404s.

I'm using the client here as i want to be able to use state and useEffect. Am i missing something here? 

"use client";

/**
  Example component to demonstrate what i want to do:
*/

export default function Page({ params }: { params: { slug: string } }) {
  const [val, setVal] = useState("Hello")

  // example
  useEffect(() => console.log(val), [val])

  return <div>{params.slug}</div>
}
Answered by American black bear
Switching back to the pages router solved the issue, might just use this from here on out.
View full answer

6 Replies

European sprat
i don't know why it's 404ing but you even though can, you shouldn't make a page a client component
if you do, it means anything which is a child of that page route will also be a client component. it's good to keep the top level page route a server component, even if all you have in it is an imported client component
American black bearOP
That's good to know, thank you! I just find this issue bizarre as it only happens in production, not the dev environment. The pages router never gave me issues like this, just want to make sure i'm using dynamic routes correctly with the app router.
American black bearOP
Switching back to the pages router solved the issue, might just use this from here on out.
Answer
ShriekDj
I think you should try to divide it into the server and client components.

page.tsx
import {Suspense} from 'react';
import { MyComponent } from './MyComponent';

export default function Page({ params }:{params: { slug: string}}) {
  return <Suspense><MyComponent slug={params.slug} /></Suspense>
}


and MyComponent.tsx
import { useState, useEffect } from 'react';

export default MyComponent({slug}: {slug: string}) {
  const [value, setValue] = useState('Hello');
  useEffect(() => console.log(val), [val])
  return <div>{slug}</div>
}
ShriekDj
@American black bear is your issue solved?