Scribd
Upload
116 views11 pages

Structuring A Large-Scale Application With Next - Js 13 - App Router - by Mohammed Poolwala - Medium

The document discusses a folder structure for NextJS projects. It describes the purpose and use of key folders like app, actions, components, containers, db, store, and types. An example project using this structure is also provided.

Uploaded by

Nelson Guaman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
116 views11 pages

Structuring A Large-Scale Application With Next - Js 13 - App Router - by Mohammed Poolwala - Medium

The document discusses a folder structure for NextJS projects. It describes the purpose and use of key folders like app, actions, components, containers, db, store, and types. An example project using this structure is also provided.

Uploaded by

Nelson Guaman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

NextJS 14 Folder Structure

Mert Enercan · Following


4 min read · Oct 6, 2023

253 5

Once again, it’s 5 in the morning, and here I am. Since I began learning
ReactJS, I’ve developed a bit of an obsession with folder structure and
naming conventions. I’ve faced numerous failures in this area; my GitHub
repository is essentially a graveyard for those unsuccessful projects.
However, I believe I’ve finally cracked the code.
I’ve created couple projects that adhere to this specific folder structure, and
I’ve grown quite comfortable with it. I assume that you are using Next.js 14^,
with the app directory, server actions, TypeScript, and Tailwind. I’ll keep it
short; here we go 👇

Quick Disclaimer
The presented approach should not be regarded as the definitive or
mandatory method for establishing a folder structure. While it has proven
effective in my own experience, it is important to acknowledge that the
organization of folders may not always adhere to a fixed or immutable
framework. Its suitability is contingent upon the specific project
requirements and the technology stack employed.
This is the folder three that i use most of the NextJS projects. Here is the
descriptions of some of the folders:

Open in app

App Folder
Search Write
This folder is the main feature of Next.js 13. You can handle all the page and
API routes within this folder. I prefer to create a separate folder named “api”
for API routes. I feel more organized this way. There is tons of options that
you can use in the “app” folder. Fore detailed information, take a look at the
offical NextJS documantation.

Actions Folder
Server actions are the experimental feature (hello from future, now it’s
stable) that provides a built-in solution for server mutations. You may use
server-side form action within this folder. For more information, vist the
offical docs!

Components Folder
I believe there’s no need for an elaborate description, I suppose xD. The only
point I would like to make is that you can include “style” and “test” files
within a component folder. In this particular case, I prefer to maintain them
in separate folders.
Containers Folder
Well, I especially want to talk about the ‘containers’ folder. This folder
essentially serves as a container for your route sections. For example, in the
‘hero-section’ folder, I have an ‘index.tsx’ file, and this file represents a
‘section’ on my home page. With this way, you may have more control over
your page sections.

And you can render those sections in the associated ‘page.tsx’ file like this:
DB Folder
You may choose to place the database configuration inside the ‘libs’ folder, I
guess? I have optionally decided to store the database configurations in a
separate folder named ‘db’.

Store Folder
This folder serves as the repository where I store my global states. In this
project, I have employed Zustand. You have the option to utilize libraries
such as Redux or manage your files within this folder as per your preference.

Types Folder
Indeed, the nomenclature of this folder aligns with its intended purpose.
Within, I have housed all the TypeScript types that are employed throughout
the project.
And with that, we conclude this discussion. It’s worth emphasizing that this
particular “structure” is by no means obligatory. The arrangement of folders
is contingent upon the specific project and technology stack in use.

Example Project
And also here is a example project that i recently made with using this file
structure: 🔗 Lalasia
Thank you for reading, i hope that helps!

My GitHub: Link

My Website: Link

Do not forget to drink at least 2L of water/day!

Nextjs 13 Folder Structure React Tailwind Css Typescript


Written by Mert Enercan Following

46 Followers

Software Developer | NextJS | NodeJS - https://www.merto.dev -


[email protected]

More from Mert Enercan

Mert Enercan Mert Enercan

Nextjs 14 Offline Page with PWA Automate Your NextJS API Routes
Time for an exciting update! In this session, With Vercel Cron Jobs
we’ll explore the customization of the ‘offline’… Hey there, again. Today, i want to introduce
you Vercel Cron Jobs and how you can use it…

4 min read · Dec 1, 2023 3 min read · Jan 29, 2024

19 11

Mert Enercan Mert Enercan

CSS ::before and ::after JavaScript - Fonksiyonlar


Okay it’s 5 in the morning, and i decided to Fonksiyon nedir ?
write and article about css ::before and ::afte…
1 min read · Jul 13, 2022
3 min read · Nov 12, 2022
52
2 1

See all from Mert Enercan

Recommended from Medium

Shakya Wijerathne in Inforwaves Blogs Mohammed Poolwala

How to Setup Redux Toolkit in Structuring a Large-Scale


Next.js App Router Application with Next.js 13: App…
In this article, I’ll share my journey and
insights on setting up a robust Next.js 13…

8 min read · Oct 10, 2023 4 min read · Oct 16, 2023

54 1 59 1
Lists

Stories to Help You Grow as a General Coding Knowledge


Software Developer 20 stories · 1074 saves
19 stories · 947 saves

Medium's Huge List of Natural Language Processing


Publications Accepting… 1344 stories · 824 saves
281 stories · 2325 saves

Haseeb Jenifar

The best way to fetch data in React Next.js 14: Server Actions
and Next.js Are you tired of slow, clunky data fetching and
In the world of web development, making mutations in your Next.js app? Enter server…
HTTP requests is a fundamental task.…

5 min read · Nov 6, 2023 3 min read · Dec 13, 2023

28 1 10

Alon Valadji in Israeli Tech Radar PropelAuth in JavaScript in Plain English


Next.js App Router Routing A Complete Guide To Using
patterns you should know Cookies in Next.js
TL;DR grab the code from the GitHub repo:
https://github.com/alonronin/nextjs-israel-…

8 min read · Mar 12, 2024 7 min read · Nov 9, 2023

603 1 37 1

See more recommendations

You might also like