Project Setup and Structure

Understanding your Next.js project structure is crucial for building applications effectively. Let's explore what each directory and file does.

Think of your project structure as a well-organized workspace. Everything has its place, and knowing where things go makes development much smoother.

The App Directory

The app directory is the heart of your Next.js application. This is where you define your routes and pages. Each file in this directory automatically becomes a route.

For example, if you create a file at app/about.js, it automatically becomes accessible at /about in your browser. This file-based routing is one of Next.js's most powerful features.

The app/layout.js file defines the layout that wraps all your pages. This is perfect for things like navigation headers, footers, and shared styling.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>My Website</nav>
        {children}
      </body>
    </html>
  );
}

The Public Directory

The public directory is for static files that should be served as-is. Images, fonts, favicons, and other assets go here.

Files in the public directory are accessible from the root URL. For example, if you place an image at public/logo.png, you can reference it in your code as /logo.png.

This is different from importing images in JavaScript, which Next.js processes and optimizes. The public directory is for files that don't need processing.

Configuration Files

Next.js uses several configuration files to customize its behavior:

next.config.js is where you configure Next.js itself. You can set up redirects, rewrites, custom headers, and other advanced features.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
};

module.exports = nextConfig;

package.json contains your project dependencies and scripts. Next.js provides several useful scripts like dev, build, and start.

tailwind.config.js configures Tailwind CSS if you choose to use it for styling. We'll cover styling options in a later section.

Creating Your First Components

Components are the building blocks of your application. In Next.js, you can create components anywhere in your project, but a common pattern is to put them in a components directory.

// components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

You can then use this component in your pages by importing it. This keeps your code organized and reusable.

Remember, components in Next.js are regular React components. You can use all the React features you know and love.

← Previous Getting Started with Next.js

Next → File-Based Routing