Best practices for organizing directories in NextJS

After going through the documentation, I'm still unsure about the best approach for creating a nested route in NextJS.

For example, I have modules with nested lessons. Think of it as a book with chapters.

Currently, I am thinking of structuring my pages directory like this:

pages/modules/[mid]/lessons/[lid]

While this route path seems generic, I'm concerned about the tight coupling to modules. What if I need a different route to access lessons or want to create a page that displays all lessons regardless of modules?

Is the structure below a better design? It feels cluttered with multiple places where lessons can appear. I hope to gain a better understanding of this soon and avoid deviating too far from the standard approach.

/Pages
--/modules
----[id].js
----/lessons
------[id].js
--/lessons
----index.js

Thank you!

Answer №1

To include the complete contents of a directory under a route parameter, you can specify the name of the directory within brackets. This way, all content within the moduleId directory will be assigned a module Id.

For example:

/Pages

--[moduleId]

----/lessons

------[id].js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching between light and dark themes in a Next.js application with Ant Design v5 theme toggle

In my Next.js application using Ant Design v5, I am working on implementing a dynamic theme toggle to switch between light and dark modes. The issue I'm facing is that the initial theme settings work correctly, but subsequent changes to the isDarkMode ...

Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

I have been troubleshooting an issue with Next.js The error I am encountering => error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http' Import trace for req ...

Create a new web application to function as an API within Azure Active Directory

Can someone help me figure out how to set up a web application in Azure AD for access from other clients, such as SPA applications? I'm unsure of how to handle the authentication step in the flow. My initial thought was to register a web app (with web ...

Optimizing Firebase and Next.js for serverless deployment on Google Cloud Platform: A guide to effectively managing staging, production, and

Currently, I am utilizing React along with next.js and Google Cloud functions to host my application. Additionally, I am integrating firebase into the mix. One pressing issue I am facing pertains to efficiently configuring the staging and production enviro ...

Generating dynamic URLs with hyphens in Next.js - a step-by-step guide

Is it possible to create a unique dynamic path in Next.js, such as 'courses-demo-[dynamic_name]'? I have already set up nested folders in the following structure: courses-demo [...slug] index.ts However, this folder structure only allows path ...

Is it compulsory for all pages to be built with react?

I am diving into the world of web development by creating my own website from scratch using React and Node.js with Next.js. I'm curious if it's possible to build certain sections, like the registration page, without using React. I wonder if optin ...

Setting session duration dynamically in Next.js with NextAuth

In my Next.js 13 project, I am utilizing next-auth and I would like to add a "remember me" feature during the sign-in process. Currently, I am using the signIn function provided by next-auth to pass the email and password. The issue arises when attempting ...

Float32Array should always have a byte length that is a multiple of 4 to avoid any unhandled runtime errors

I am struggling to fetch my custom model in my next.js app. Both the model.json file and the group1-shard1of61 are located in the same folder inside the API directory. I am encountering the following errors: Unhandled Runtime Error RangeError: byte length ...

Transferring data to a Component as properties in Next.js

I've encountered an issue while trying to pass editvalues as props to my EditForm component, resulting in the error 'editvalues is not defined'. Important note: editvalues is an object Upon using console.log(editvalues), I can see the valu ...

Yarn encountered an exit code of 1 and failed to create the app during the command execution

I've been working on creating a next.js app with tailwindcss, but I keep encountering an error when using the following command: yarn create next-app -e -tailwindcss demo-app-full Every time I run this command, it gives me the following error message ...

Unlock the power of dynamic routes in Reactjs with this comprehensive guide

Currently, I am delving into the world of Reactjs and Nextjs, specifically working on dynamic routes. To elaborate, I have a list of blogs that I would like to showcase in detail. For this purpose, I created a folder named "blogs" and nested a file called ...

When accessing a Next.js and Heroku application, users are automatically redirected to the unsecured http:// rather than the secure https:// protocol

In my first Next.js and Heroku app, I set up a payment page for my application. I upgraded my Heroku dyno to automatically have SSL added and pointed a subdomain at my Heroku app. Everything works fine, but when a user manually types in the URL (e.g., exam ...

Utilizing Next.js with getStaticProps and withPageAuthRequired

Per the documentation provided at @auth0/nextjs-auth0, we have the option to utilize withPageAuthRequired to prompt a login screen on pages that require authentication. In shorter terms: export const getServerSideProps = withPageAuthRequired(); However, ...

"Challenges with conditional exports and bundle size discrepancies arise when utilizing TurboRepo for a monorepo structure with a Next.js application and buildable

Trying to set up a JS/TS monorepo using Turborepo: . └── root ├── apps │ ├── first-app (next.js app) │ └── second-app (next.js app) ├── configs (ts, tsup) └── packages └── ui (re ...

Design a component to display on the main component, which can be activated by a function within another component

I am looking to create a custom DeleteModal component in my Next.js project. I am aiming for something similar to sonner import { Toaster, toast } from 'sonner' //I want to import Toaster into layout.js to render and use toast.success() in diffe ...

Triggering a router push inside useEffect can lead to the effect being constantly executed in a never-ending loop

In my NextJs project, I've implemented a component that utilizes the useDebounceHook for handling search functionality. This is how the component is structured: import { useRouter } from 'next/router'; function SearchComponent() { const r ...

Running Next.js in AWS Lambda with the `experimental-edge` runtime can be achieved by following these steps

I am currently exploring the possibility of running Next.js (v13.0.6) with OG image generation logic using @vercel/og in AWS Lambda. Everything runs smoothly locally, both in development and production modes. However, I encounter a 500 error when attempti ...

Using NextJS App Router to implement redirects within the useEffect hook

I'm currently working on a Next.js 13.4.9 project and encountering an issue with redirecting logged in users within a client component using the useEffect hook. Despite trying a specific method, I keep getting an error in the browser (NEXT_REDIRECT). ...

leveraging an array from a separate JavaScript file within a Next.js page

I am facing a situation where I need to utilize an array from another page within my Next.js project. However, it seems that the information in the array takes time to load, resulting in encountering undefined initially when trying to access it for title a ...

Exploring Blob functionality in TypeScript?

I defined a global Blob object: declare global { interface Blob { prototype: Blob; new (name: string, url: string): Blob; } } It is functioning correctly in this code snippet: export const blobToFile = (blob: Blob) => { let file: File | n ...