jsschools
Project Structure

app/, public/, next.config.ts

Project Structure

The default Next.js layout uses app/ for routes, public/ for static assets, and next.config.ts for build configuration.

4 min read Level 1/5 #nextjs#structure
What you'll learn
  • Identify the role of `app/`, `public/`, and `next.config.ts`
  • Understand that `src/` is optional
  • Know what `layout.tsx` and `page.tsx` do

A fresh Next.js project has only a handful of top-level files and folders. Knowing what each one is for makes the rest of the framework easier to navigate.

The Default Layout

my-app/
  app/                # routes, layouts, server components
    layout.tsx
    page.tsx
  public/             # static files served at /
    favicon.ico
  next.config.ts      # build + framework config
  package.json
  tsconfig.json

What Each Piece Does

  • app/ is the App Router root. Every folder under it is a URL segment; files like page.tsx and layout.tsx define what renders.
  • public/ is for static assets. A file at public/logo.svg is served at /logo.svg.
  • next.config.ts configures the framework. Use it for image domains, redirects, experimental flags, and webpack or Turbopack overrides.
  • middleware.ts at the project root runs on every matching request, before the route.

Optional src/

If you prefer to keep source separate from config, add a src/ folder. Then your routes live in src/app/ instead. Next.js auto-detects this, no config needed.

Layouts and Pages

A layout wraps its segment and renders children. A page is the leaf — the component that actually shows up at that URL.

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/page.tsx — renders at /
export default function HomePage() {
  return <main>Welcome</main>;
}

With the layout in place, every page renders inside it. The next lesson unpacks how the App Router maps the filesystem to URLs.

The App Router →