Next.js Discord

Discord Forum

Dynamic routes inside a route group (features) not rendering

Unanswered
Toyger posted this in #help-forum
Open in Discord
ToygerOP
Hi Next.js community,
I'm new to Next.js and using the App Router (Next.js 16.0.10) and I have the following folder structure:
app/
 └── (features)/
     ├── page.tsx             ← Home page showing category cards
     └── [categoryId]/
         └── page.tsx         ← Dynamic category page

[categoryId]/page.tsx looks like this:
import { CATEGORIES, CategoryId } from "@/app/data/categories";
import { notFound } from "next/navigation";

export default function Page({
  params,
}: {
  params: { categoryId: CategoryId };
}) {
  const category = CATEGORIES[params.categoryId];

  if (!category) notFound();

  return <h1>{category.name}</h1>;
}


CATEGORIES is defined as:
import { hardcoded } from "../lib/i18n";
import { Home, UtensilsCrossed } from "lucide-react";

export const CATEGORIES = {
  residences: {
    id: 1,
    name: hardcoded("Residences"),
    icon: Home,
  },
  foods: {
    id: 2,
    name: hardcoded("Foods"),
    icon: UtensilsCrossed,
  },
} as const;

export type CategoryId = keyof typeof CATEGORIES;
export type Category = (typeof CATEGORIES)[CategoryId];


On my home page, I render the links like this:
import CategoryCard from "./CategoryCard";
import { CATEGORIES, CategoryId } from "@/app/data/categories";

export default function CategorySection() {
  // Get all the unique IDs for our categories (e.g., 'residences', 'foods').
  const categoryIds = Object.keys(CATEGORIES) as CategoryId[];

  // This part creates the list of <CategoryCard> components.
  const categoryCards = categoryIds.map((id) => {
    const details = CATEGORIES[id];
    return (
      <CategoryCard
        key={details.id}
        name={details.name}
        icon={details.icon}
        href={id}
      />
    );
  });

  // Render the list of cards inside a grid layout.
  return <div className="grid grid-cols-2 gap-4">{categoryCards}</div>;
}

4 Replies

ToygerOP
Problem:
1. When I click a link (e.g., /foods or /residences), the URL changes, but the dynamic page does not render.
2. Errors in Next.js 16.0.10 Turbopack:
## Error Type:Console Error
## Error Message
E:\findout\.next\dev\server\chunks\ssr\node_modules__pnpm_59ae27d5._.js: Invalid source map. Only conformant source maps can be used to find the original code. Cause: Error: sourceMapURL could not be parsed
    at createConsoleError (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_7a48e014._.js:2189:71)
    at handleConsoleError (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_7a48e014._.js:2970:54)
    at console.error (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_7a48e014._.js:3114:57)
    at Page (app\(features)\[categoryId]\page.tsx:9:38)
    at Object.react_stack_bottom_frame (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2714:30)
    at resolveConsoleEntry (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2008:170)
    at processFullStringRow (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2409:17)
    at processFullBinaryRow (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2349:9)
    at processBinaryChunk (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2459:98)
    at progress (file://E:/Common/New Learnings/findout/.next/dev/static/chunks/ef544_next_dist_compiled_react-server-dom-turbopack_68a1a768._.js:2628:13)
    at Page (<anonymous>:null:null)
## Code Frame
   7 |   params: { categoryId: CategoryId };
   8 | }) {
>  9 |   const category = CATEGORIES[params.categoryId];
     |                                      ^
  10 |
  11 |   if (!category) notFound();
  12 |
Next.js version: 16.0.10 (Turbopack)
Question:
1. Am I misunderstanding how route groups interact with dynamic routes in the App Router?
2. What is the correct way to structure dynamic routes inside a route group so they render properly at /foods or /residences?

Thanks in advance for any guidance!
ToygerOP
I was able to solve the issue by using promise. Here is the solution i used:
import { CATEGORIES, CategoryId } from "@/app/data/categories";
import { notFound } from "next/navigation";

export default async function Page({
  params,
}: {
  params: Promise<{ categoryId: CategoryId }>;
}) {
  const id = (await params).categoryId;
  const category = CATEGORIES[id];
  if (!category) notFound();

  return <h1>{category.name}</h1>;
}