Lære Understanding the Project Structure

Stryg for at vise menuen

After creating a Next.js project, you will see several folders and files. At first, this structure may look unfamiliar, but each part has a clear purpose.

Next.js uses a structured approach to organize your application. Instead of placing everything randomly, you work with predefined folders that control routing, UI, and logic.

Understanding this structure will help you navigate the project and know where to add new features.

Example - Default Project Structure

A typical Next.js project looks like this:

my-app/
  app/
    page.tsx
    layout.tsx
  public/
  styles/
  package.json
  next.config.js

app folder

This is the most important folder in your project.

It controls routing and page structure;
Each folder inside it represents a route;
Files like page.tsx define what is shown on the screen;
Files like layout.tsx define shared UI.

page.tsx

This file represents a page.

export default function Page() {
  return <h1>Home Page</h1>;
}

The root page.tsx becomes the homepage (/).

layout.tsx

This file wraps your pages.

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

It is used for shared structure like navigation or layout.

public folder

Stores static files like images;
Files here are accessible directly by URL.

Example:

public/logo.png → http://localhost:3000/logo.png

package.json

Contains project dependencies and scripts;
Defines commands like npm run dev.

next.config.js

Used for project configuration;
You usually do not need to modify it at the beginning.

How It Works Together

The app/ folder defines your pages and routes;
page.tsx controls what each route displays;
layout.tsx provides shared structure across pages;
Other files support configuration and assets.

This structure helps keep your application organized and scalable as it grows.

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 4

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Sektion 1. Kapitel 4