Next.js Project Structure — Understanding Every File & Folder

▲ Next.js 15+ (App Router) 🟢 Chapter 4 of 43 📂 Phase 2: Setup & Project Structure 📅 2026 Edition

📌 Covered in this chapter: app/ Folder · page.tsx & layout.tsx · public/ Folder · Config Files · src/ Directory Option · Recommended Structure

Ee chapter lo, create-next-app generate chesina prathi file/folder enduku unnaydo, danni ela organize cheyalo deep ga chuddam — ee structure ardham aithe migతా entire course navigate cheyadam chala easy avuthundi.

1The app/ Folder — Heart of Your Project

app/ folder, Next.js App Router lo routing system core. Ee folder lopala unna prathi sub-folder, oka URL segment ni represent chestundi, and aa folder lopala unna page.tsx file, aa route ki publicly accessible page ni create chestundi.

Idi "file-system based routing" — separate router library (react-router లాంటిది) install cheyాల్సిన అవసరం ledu, folders create చేయడమే routing.

2Key Files Inside app/

File	Purpose
`page.tsx`	Route ki UI define chestundi — publicly accessible page create chestundi
`layout.tsx`	Multiple pages madhya shared UI (header, footer, sidebar) define chestundi
`globals.css`	Whole app ki apply ayye global CSS styles
`loading.tsx`	Route load avuthunnappudu chupinche loading UI
`error.tsx`	Route lo error వచ్చినప్పుడు chupinche fallback UI
`not-found.tsx`	404 page — route దొరకనప్పుడు chupinche UI

3Root Layout — The Mandatory File

Prathi Next.js App Router project ki, app/layout.tsx compulsory ga undali — idi <html> and <body> tags ni define chestundi, mొత్తం app ki wrap chestundi:

💻 Example 1: A Minimal Root Layout

app/layout.tsx ▶ Run in Compiler

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header>Our Site Header</header>
        {children}
        <footer>Our Site Footer</footer>
      </body>
    </html>
  );
}

🔍 Breakdown:

{children} prop — idi current active page (page.tsx) ni represent chestundi. Header, Footer prathi page lo repeat avvakunda, layout okte sari define chesthe chalu.

4public/ Folder — Static Assets

public/ folder lopala pెట్టిన files (images, fonts, favicon), direct ga root URL nundి access avuthayi — public/logo.png file ni browser lo /logo.png ani access cheyachu.

5Important Configuration Files

next.config.ts: Image domains, redirects, environment settings lాంటి Next.js-specific configuration.
package.json: Project dependencies, scripts (dev, build, start) list chestundi.
tsconfig.json: TypeScript compiler options, import aliases (@/components) define chestundi.
.env.local: Secret keys, API URLs lాంటి environment variables — Git lo commit cheyakudadu.

6The src/ Directory Option

Setup lo "src directory" ki Yes cheste, app/ folder root level nundi src/app/ loki move avuthundi. Idi purely organizational — config files (next.config, package.json) ni app code నుండి visually separate chేయడానికి use chestaru, functionality change avvadu.

my-next-app/ ├── app/ │ ├── layout.tsx → Root layout (mandatory) │ ├── page.tsx → Home page (/) │ ├── globals.css → Global styles │ └── about/ │ └── page.tsx → About page (/about) ├── components/ → Reusable UI components ├── lib/ → Helper functions, DB clients ├── public/ → Images, fonts, static files ├── types/ → Shared TypeScript types ├── .env.local ├── next.config.ts ├── package.json └── tsconfig.json

⚠️ Common Mistake: Accidental Routes

app/ folder lopala ఏదైనా folder లో page.tsx pెడితే, adi automatic ga oka public route avuthundi. Component files ni app/ lopala కాకుండా, separate components/ folder లో pెట్టడం safest — లేకపోతే accidental ga unwanted URLs create avvachu.

💻 Hands-on Interactive Practice Challenge

Create a components/Button.tsx file (not inside app/) that exports a reusable button component accepting a label prop.

components/Button.tsx ▶ Run in Compiler

export default function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}

Run This Challenge in Online Node.js IDE →

❓ Frequently Asked Questions (FAQ)

Q app/ folder tappaninisari pages/ folder use cheyacha?

Next.js 13+ lo rendu routers unnayi — legacy 'Pages Router' (pages/ folder) and modern 'App Router' (app/ folder). Ee course entirely App Router meedha focus chestundi, ఇదే official recommended approach 2026 lo.

Q layout.tsx prathi folder lo compulsory ah?

Root level (app/layout.tsx) matrame compulsory. Nested folders lo layout.tsx optional — pెడితే, aa specific section ki matrame apply ayye shared UI create avuthundi.

Q components/ folder ఎక్కడ pెట్టాలి — app/ లోపల ah, బయట ah?

Best practice: app/ folder బయట, root level లో pెట్టడం (లేదా src/ vాడితే src/components/). Deeని valla accidental routing avvadు, and imports (@/components/Button) clean ga untayi.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on Next.js 15+ (App Router) · Last updated August 2026