Folder Structure & App Router Basics

A typical Next.js App Router project keeps routes in app/, static files in public/, reusable UI in components/, and helpers in lib/.

Main folders you will use

A typical Next.js App Router project keeps routes in app/, static files in public/, reusable UI in components/, and helpers in lib/.

You may put app/ at the project root or under src/app/. Both work — pick one style and stay consistent.

Real-life example: Folders are labeled drawers in a desk. app/ is active paperwork, public/ is the brochure rack, components/ is spare parts, lib/ is your toolbox.

app/ — routes, layouts, loading UI, Route Handlers
public/ — favicon, images, robots.txt (URL starts at /)
components/ — shared React components
lib/ — utils, db clients, helpers

Request through App Router

page.tsx and layout.tsx conventions

In the App Router, a folder becomes a URL segment. A file named page.tsx makes that segment a public route. layout.tsx wraps pages and nested routes with shared UI.

Root layout (app/layout.tsx) must include html and body tags. Nested layouts wrap only their branch of the tree.

Real-life example: layout.tsx is the frame and header of every room in a house. page.tsx is the furniture unique to that room.

Tip: Only special file names create routes (page, layout, loading, error, route, and a few more). A random Button.tsx inside app/ is not a URL by itself.

Root layout + home page

// app/layout.tsx
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>Rishtaara Learn</header>
        {children}
      </body>
    </html>
  );
}

// app/page.tsx → route "/"
export default function HomePage() {
  return <h1>Home</h1>;
}

// app/about/page.tsx → route "/about"
export default function AboutPage() {
  return <h1>About</h1>;
}

The optional src/ directory

Many teams keep source code under src/ so config files stay at the root and app code stays together: src/app, src/components, src/lib.

create-next-app can enable this with --src-dir. URLs do not change — src/ is only an organization choice.

Real-life example: src/ is like keeping school notebooks in one backpack pouch while leaving the timetable and ID card in the outer pocket (root config).

Example tree with src/

my-next-app/
  package.json
  next.config.ts
  public/
    logo.png
  src/
    app/
      layout.tsx
      page.tsx
      about/
        page.tsx
    components/
      Header.tsx
    lib/
      utils.ts