Add another routes within dynamic Route in nextjs 14

Question

Guy I came across a scenario where i need project id that is dynamic , For management/123 that take me to dashboard of that project that shows stats about the project, well the problem is i have to show feature and issues pages as well that are another routes same for create feature and create issue

Is there any way we can do something like this

/management/123/issues /management/123/features etc

But when i place features folder inside management/[id]/page.tsx and feature issues folder it show you cant you other routes with in dynamic route also document says

Dynamic routes must have page.tsx file not any other routes

Whats the best solution for my problem or anyway to get this done

All i need is project id , when i am at features pages as well as feature detail page or create feature page as the user the interacts to make some changes i have to use project id to make change in backend

If you need more details i am happy to provide

Answer 1

Problem :

Solution :

You need to do nesting of dynamic routes.

Inshort :

Your folder structure should be something like this :

│       ├── management
│       │   ├── page.js
│       │   └── [mid]
│       │       ├── features
│       │       │   ├── create-feature
│       │       │   │   └── page.js
│       │       │   ├── page.js
│       │       │   └── [fid]
│       │       │       └── page.js
│       │       ├── issues
│       │       │   ├── create-issue
│       │       │   │   └── page.js
│       │       │   ├── page.js
│       │       │   └── [issueid]
│       │       │       └── page.js
│       │       └── page.js

By using above folder structure you will get URLs like :

• http://localhost:3000/management

• http://localhost:3000/management/1 (project id : 1)

• http://localhost:3000/management/1/features (Shows all features for project id : 1)

• http://localhost:3000/management/1/features/create-feature (Create new feature for project id : 1 )

• http://localhost:3000/management/1/features/Feature3 (Shows feature id 3 for project id : 1)

• http://localhost:3000/management/1/issues (Shows all Issues for project id : 1)

• http://localhost:3000/management/1/features/create-issue (Create new Issue for project id : 1 )

• http://localhost:3000/management/1/issues/Issue3 (Shows issue id 3 for project id : 1)

Code :

Please make necessary changes wherever required, code is kept as small as possible

page.js under app\management\page.js :

import Link from "next/link";

export default function ManagementPage() {
    const Projects = [1, 2, 3, 4, 5]
    return (
        <div>
            <h1>Management</h1>
            <h3>All Projects : </h3>
            <ul>
                {
                    Projects.map((v, i) => (
                        <li key={i}>
                            <Link href={'management/' + v}>
                                Project {v}
                            </Link>
                        </li>
                    ))
                }
            </ul>
        </div>
    );
}

Project Dashboard under app\management\[mid]\page.js :

import Link from "next/link";
export default function Dashboard({ params }) {
    return (
        <div>
            <h1>Dashboard</h1>
            <h3>Management of Project : {params.mid}</h3>
            <Link href={"/management/" + params.mid + "/features"}>Features of {params.mid}</Link>

            <br />

            <Link href={"/management/" + params.mid + "/issues"}>Issues of {params.mid}</Link>
        </div>
    );
}

All Features Page under app\management\[mid]\features\page.js (I have kept Create features page link here ) :

import Link from 'next/link'
const Features = ({ params }) => {
    const AllFeatures = ["Feature1", "Feature2", "Feature3", "Feature4"]
    return (
        <div>
            <h1>Features page for Project {params.mid}</h1>
            <p>All Features of Project {params.mid}</p>

            {/*  GET FEATURES BY ID, USING API CALL */}

            <ul>
                {
                    AllFeatures.map((v, i) => (
                        <li key={i}>
                            <Link href={"/management/" + params.mid + "/features/" + v}>{v} </Link>
                        </li>
                    ))
                }
            </ul>

            <Link href={"/management/" + params.mid + "/features/create-feature"}>+ Create Features</Link>

        </div>
    )
}
export default Features

Feature detail by FeatureID under app\management\[mid]\features\[fid]\page.js :

const FeatureDetailsPage = ({ params }) => {
    return (
        <div>
            <h1>Features Details Page </h1>
            <h3>Features details of Project {params.mid}</h3>
            <p>Feature ID {params.fid}</p>
        </div>
    )
}
export default FeatureDetailsPage

Create Feature Page under app\management\[mid]\features\page.js :

const CreateFeaturePg = ({ params }) => {
    return (
        <div>
            <h1>Create Feature Page </h1>
            <p>Create Features for Project {params.mid}</p>
            <h3>Add Feature for Project {params.mid}</h3>
            <input type="text" placeholder='Feature Name' />
            <button>Add Feature</button>
        </div>
    )
}

export default CreateFeaturePg

All Issues page under app\management\[mid]\issues\page.js (I have kept Create Issues page link here ) :

import Link from 'next/link'
const IssuesPage = ({ params }) => {
    const AllIssues = ["Issue1", "Issue2", "Issue3", "Issue4"]
    return (
        <div>
            <h1>Issues Page for Project {params.mid}</h1>
            <ul>
                {
                    AllIssues.map((v, i) => (
                        <li key={i}>
                            <Link href={"/management/" + params.mid + "/issues/" + v}>{v} </Link>
                        </li>
                    ))
                }
            </ul>
            <Link href={"/management/" + params.mid + "/features/create-issue"}>+ Create Issues</Link>

        </div>
    )
}
export default IssuesPage

Issues Details Page under app\management\[mid]\issues\[issueid]\page.js :

const IssueDetailsPage = ({ params }) => {
    return (
        <div>
            <h1>Issues Details Page </h1>
            <h3>Issues details of Project {params.mid}</h3>
            <p>Issue ID {params.issueid}</p>
        </div>
    )
}
export default IssueDetailsPage

Create Issues Page under app\management\[mid]\issues\create-issue\page.js:

const CreateIssuePg = ({ params }) => {
    return (
        <div>
            <h1>Create Issue Page </h1>
            <p>Create Issues for Project {params.mid}</p>
            <h3>Add Issue for Project {params.mid}</h3>
            <input type="text" placeholder='Issue Name' />
            <button>Add Issue</button>
        </div>
    )
}
export default CreateIssuePg

Please Read :

• Dynamic Routes : https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

If you still have any doubts leave a comment.