CODEWITHSUNDEEP
reactjsroutesnext.js
user3601578
user3601578

Reputation: 1362

Dynamic routes in Next.JS Route groups

In my Next.JS app, I have the following [id].tsx:

"use client";
import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
};

export default Post;

(1) It works FINE if it is placed in the folder "test", so its location is test/[id].tsx

(2) It does NOT work if I place it in a "route group", so if its location is (mygroup)/test/[id].tsx -> It gives me an 404 error.

I accept any answer that explains to me briefly who I can make it work with the route group.

Upvotes: 1

Views: 807

Answers (1)

user3601578
user3601578

Reputation: 1362

I fixed it. My problem was, that my Next.JS project is setup with:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

So my folder structure should look like this:

(mygroup)/test/[id]/page.tsx

And page.tsx should look like:

"use client";

const Post = ({ params }) => {
  const { id } = params;

  return <p>Post: {id}</p>;
};

export default Post;

Upvotes: 1

Related Questions