[Next.js 15] - Part 2. Project Structure
Ace Lennox
Next.js 15 brings several enhancements to its project structure, offering a streamlined development experience. Let’s take a closer look at the essential components and their purposes to understand how to work effectively with this version.
Project Overview
When you create a Next.js 15 project, you'll notice several directories and files. Here's a detailed breakdown of their roles and functionality.
1. .next Directory
Purpose: Automatically generated during the build process.
Details:
Contains compiled code, optimized assets, and other files necessary for running your application.
Managed entirely by Next.js, so you don’t need to modify anything here.
2. app Folder
Introduced: Starting from Next.js 13, the
appfolder replaces the traditionalpagesfolder and is now the default in version 15.Purpose: Central hub for defining your application’s React Server Components, layouts, pages, and UI elements.
Key Features:
Layouts: Define reusable page structures.
Components: Create modular UI pieces.
Routing: File-based routing system built directly into the folder structure.
Example:
app/
├── layout.js # Root layout for the app
├── page.js # Default page of the app
├── about/
│ ├── page.js # About page
│ └── layout.js # Layout specific to the about page3. node_modules Directory
Purpose: Houses all dependencies installed via npm or yarn, such as React and Next.js.
Key Notes:
Do not modify directly.
Automatically updated when you run
npm install.Excluded from version control using
.gitignore.
4. public Folder
Purpose: Stores static assets like images, fonts, and other resources.
Special Feature: Files are served directly at the root of your domain.
Example:
public/logo.pngis accessible athttp://localhost:3000/logo.png.
Key Files
1. .eslintrc.json
Purpose: Configures ESLint for maintaining code quality.
Details: Comes with sensible defaults optimized for Next.js but can be customized to fit your preferences.
2. .gitignore
Purpose: Specifies files and directories to exclude from Git version control, such as
node_modulesand.next.
3. tsconfig.json or jsconfig.json
Purpose: Configures TypeScript (or JavaScript) settings for the project.
Key Setting:
Path Aliases: Enable cleaner imports.
Example:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["app/components/*"]
}
}
}4. next.config.js
Purpose: Core configuration file for Next.js.
Enhancements in v15:
Experimental Features: Easily toggle new Next.js capabilities.
Optimized Middleware: Customize how requests are handled.
5. package.json
Purpose: Defines the dependencies, scripts, and metadata for your project.
Key Sections:
Dependencies: Essential libraries for your app, like
react,next, andreact-dom.Dev Dependencies: Development tools like
eslintandtailwindcss.Scripts: Manage your project using commands.
npm run dev: Start the development server.npm run build: Build the app for production.npm run start: Run the production build.npm run lint: Check code quality.
6. package-lock.json
Purpose: Locks dependency versions to ensure consistent builds across environments.
7. postcss.config.js
Purpose: Configures PostCSS, used for transforming CSS with JavaScript.
Integration: Works seamlessly with Tailwind CSS for utility-first styling.
Next Steps
The app folder is the heart of your project in Next.js 15. In the next session, we’ll focus on building pages, layouts, and components within this structure to bring your application to life.
Familiarize yourself with this structure to make the most out of the features Next.js 15 offers!