DEV Community

Mastering Next.js: The Ultimate Guide to Structuring Large-Scale Projects in 2024

Vishal Yadav on August 02, 2024

Introduction: Taming the Next.js Jungle Hey there, code wranglers and Next.js enthusiasts! 👋 Are you feeling like Indiana Jones, hacking...

Read full post

Sheraz Manzoor • Aug 3

Great written boy. I am Senior Software Engineer and I appreciate this structure. One minor thing I will suggest to improve, the components is a different thing and forms is a different.

For forms and big layouts, which are route related (means which are for a specific page) they should kept in modules directory..

And only reusable components should kept in components directory. That it. I just wanted to see how others structure this and what are you teaching to other.

With that minor improvement, I suggest all the juniors to follow this structure!!!

Zakharov Vladyslav • Aug 3 • Edited

Where are components styles? I have a structure

components/
|__ component-name/
|_____ component-name.module.scss
|_____ index.tsx
|__ index.ts

in index.ts:

export * from ‘./component-name’

so after that I can import components like

import { ComponentName } from ‘@/components’;

Prince Muel • Aug 4

Barrel exports are easier to make but can increase your code import size. Also, they can leak client component code into server components and vice versa.

Zakharov Vladyslav • Aug 4

Thanks a lot for this. Never knew and never met explanations for it

Mohammad Mahdi Bahrami • Aug 7

I do it the same way! 😅

Nikolai Lehbrink • Aug 4

Nice article, but I think you should update the API Routes for the Win section @vyan, because that's not an API Route from Next.js 13+ :) It is more like:

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const posts = await fetchPosts();
  return NextResponse.json(posts);
}

Barack Okaka Obama • Aug 7

Next is a very clean language.

Thomas TS • Aug 7

NextJS has JS in the name because is Javascript. And Javascript is a language.

Why bother with a Microsoft (evil) tool as Typescript if we have JSDoc?

Vitaliy Potapov • Aug 5

Regarding to auth, we have an opposite structure - keep most pages in (authorized) dir and only login/register on the root level. This is because for all authorized pages we have a header in layout, but it is not shown on login/register pages:

|_ 📁 app
|  |_ 📁 (authorized)
|  |  |_ 📁 dashboard
|  |  |  |_ 📄 page.tsx
|  |  |_ 📄 layout.tsx
|  |_ 📁 login
|  |  |  |_ 📄 page.tsx
|  |  |  |_ 📄 layout.tsx

Could you advice how can we achieve the same with (auth) dir?

Bijay Das • Aug 3

hey!!, this is exactly my structure

Vishal Yadav • Aug 3

Cool

lwooden • Aug 6

Great article! I did notice that you omitted an “actions” folder under lib, but this is probably because you are using /api as a backend instead of SAs. Additionally, you have reference components that are using client side hooks but you didn’t annotate the file like so: “use client”

Ogbole Divine • Aug 5

All these folders do they have extra price of coding within them?
If yes how do u write those and embed them on ur Next.js screen.....

Secondly can I use vs.code to work on a next.js app?
Can I also write them in pseudocode?

Michael Steven David • Aug 5

Where would you likely put server action files? Would it be inside its own folder within the root folder or inside the lib?

Rehan Arif • Aug 5

"In the constantly changing field of web development.", the pursuit of speed, efficiency, and simplicity is ceaseless, much like the advances in AI-powered tools explored in our GitHub Copilot vs Chatbot article. Next, js 14, Vercel's latest innovation, has arrived to redefine the way we construct web applications. Equipped with an array of enhancements, including the groundbreaking TurboPack, robust Server Actions, and the eagerly anticipated Partial Pre-Rendering, Next js 14 is set to transform your web development experience, Read more at webzeto.com

mohamed karim • Aug 2

Thank for sharing

Vishal Yadav • Aug 3

My Pleasure!

Ashok Kumar • Aug 4

Hi I need nextjs with swagger-autogen 3.0

It's works but not able to get dynamic routes each endpoints of the top we need to add some swagger schema why

I don't want like to add schema like swagger 2.0

If any one solve it please add a blog and tag @ashok2406

Voyagergle • Aug 2

oh no, is this the end？
but i still give a sponsor

Vishal Yadav • Aug 2

For What ?

Jam Straw • Aug 8

Fantastic article.

Alberts Kresi • Aug 7

Great

Touchumind • Aug 6

And another tip or maybe personal preference: use named exports for your components. This makes sense for code intellisense.

Rakesh Potnuru • Aug 5

Nice! This is close to how I structure my Next.js apps.

Chris Leo • Aug 5

Wow I woul not wait to use it lately thanks for this awesome advice

rmfloris • Aug 5

Where/how would you add tests/mocks to the structure?

Sumonta Saha Mridul • Aug 4

@vyan any GitHub link available? so that I can explore the structure more?

developerkaushalkishor • Aug 4

I love to learn from you,after seeing this article

Ashish Prajapati • Aug 4

Such a good content. Mine is also matching but learned a few things from you.

Boby Tiwari • Aug 4

Nice

ugener • Aug 4

thanks for sharing!

Wesley Chong • Aug 3

Cool

mohamed karim • Aug 3

Thank for sharing

Anze • Aug 3

Hey, what are the pros of dynamic importe i.e code splitting?

Nikolai Lehbrink • Aug 4

Imagine you have a <Dialog> component that heavily relies on JavaScript. If this component is loaded with the initial page render, it increases the initial bundle size unnecessarily, especially if the user never opens the dialog. With dynamic imports, such as in Next.js 13+ using const Dialog = dynamic(() => import('../components/Dialog')), you only load the component when it's needed. This means the JavaScript for the <Dialog> component is only loaded when the button to open it is clicked. Hope this helps. You can also take a look at the reference in the Next.js docs.