When you first create a Next.js project, you'll notice a well-defined structure that helps organize your application. This structure is key to building maintainable and scalable applications. Let's break down the most important directories and files you'll encounter.
graph TD;
A[Root Directory]
A --> B(pages/)
A --> C(public/)
A --> D(styles/)
A --> E(.next/)
A --> F(package.json)
A --> G(next.config.js)
The pages/ directory is where the magic of routing happens in Next.js. Each file within this directory automatically becomes a route in your application. For example, pages/index.js will be your homepage (/), and pages/about.js will be accessible at /about.
pages/index.js
import React from 'react';
function HomePage() {
return <h1>Welcome to my Next.js App!</h1>;
}
export default HomePage;pages/about.js
import React from 'react';
function AboutPage() {
return <h1>About Us</h1>;
}
export default AboutPage;The public/ directory is for static assets that will be served directly from the root of your application. This includes images, fonts, and other files that don't need any processing by Next.js. You can access these assets using their relative path from the root.
public/logo.png
// In your component:
<img src="/logo.png" alt="App Logo" />The styles/ directory is where you can place your global CSS files or component-specific styles. Next.js supports various styling methods, including CSS Modules, global CSS, and Sass.
styles/globals.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}The .next/ directory is where Next.js outputs your built application. This directory is automatically generated and managed by Next.js. You should never manually edit files in this directory, as they will be overwritten during the build process.