0
0
NextJSframework~5 mins

Project structure overview in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Knowing the project structure helps you find files easily and understand how your Next.js app works.

When starting a new Next.js project to organize your code.
When you want to add pages or components in the right place.
When you need to find where to put styles or API routes.
When collaborating with others to keep the project clear.
When debugging to quickly locate the source of issues.
Syntax
NextJS
my-nextjs-app/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   ├── api/
│   │   └── hello/route.ts
│   └── styles/
├── public/
│   └── images/
├── node_modules/
├── next.config.js
├── package.json
└── tsconfig.json

The app/ folder holds your pages and layouts using the new App Router.

The public/ folder stores static files like images accessible by URL.

Examples
This is the main page of your app shown at the root URL.
NextJS
app/page.tsx

export default function HomePage() {
  return <h1>Welcome to Next.js!</h1>;
}
The layout wraps all pages and can include headers or footers.
NextJS
app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
This creates an API route accessible at /api/hello.
NextJS
app/api/hello/route.ts

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' });
}
Sample Program

This simple Next.js app shows a homepage with a heading. The layout wraps the page content in a basic HTML structure.

NextJS
app/page.tsx

export default function HomePage() {
  return <h1>Welcome to Next.js!</h1>;
}

app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
OutputSuccess
Important Notes

Use the app/ folder for new Next.js projects with the App Router.

Static files like images go in public/ and can be accessed directly by URL.

API routes inside app/api/ let you create backend endpoints easily.

Summary

The app/ folder organizes pages, layouts, and API routes.

public/ holds static files like images.

Understanding this structure helps you build and maintain your Next.js app smoothly.