Understanding Project Structure — Complete Guide

Understanding Project Structure — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.

8 min read Updated 8/10/2026

On this page

Next.js Tutorial (LearnHub) · Lesson 3 of 100

Understanding Project Structure

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Foundations · ~12 min read · Module 1: Next.js Foundations

Introduction

This lesson is part of the beginner section. We explain Understanding Project Structure slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. A new App Router project includes app/ (routes and layouts), public/ (static files), next.config.ts (framework config), package.json (scripts and deps), and tsconfig.json (TypeScript). Optional src/app/ if you chose src directory. When a teammate says "fix the course catalog page," you need to know app/courses/page.tsx vs components/ without guessing.

Understanding Project Structure is setup knowledge. Without it, LearnHub will not run. Spend time here until npm run dev works without errors.

When will you use this?

You need this before writing any Next.js code — same as installing Node.js before opening a project.

Every React/Next.js job expects you to run npx create-next-app and npm run dev on day one.
Interviewers often ask you to explain the App Router folder structure and Server vs Client Components.

Real-world: Zoho-style SaaS dashboard

The B2B SaaS team building Zoho-style SaaS dashboard uses Understanding Project Structure to know which folder to edit when fixing the course catalog or lesson page. tenant admins never see the TypeScript files — they just get a fast, reliable billing, team settings, and analytics widgets.

Production-style code

learnhub/
  app/
    layout.tsx      → root shell (html, body, fonts)
    page.tsx        → home route /
    globals.css     → global styles
  public/
    logo.svg        → static URL /logo.svg
  components/       → you add reusable UI here
  next.config.ts
  package.json

What happens in production: In Zoho-style SaaS dashboard, a solid Understanding Project Structure foundation lets the team ship billing, team settings, and analytics widgets on schedule without toolchain surprises.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

learnhub/
  app/
    layout.tsx      → root shell (html, body, fonts)
    page.tsx        → home route /
    globals.css     → global styles
  public/
    logo.svg        → static URL /logo.svg
  components/       → you add reusable UI here
  next.config.ts
  package.json

Line-by-line walkthrough

Code	What it means
`learnhub/`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`app/`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`layout.tsx → root shell (html, body, fonts)`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`page.tsx → home route /`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`globals.css → global styles`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`public/`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`logo.svg → static URL /logo.svg`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`components/ → you add reusable UI here`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`next.config.ts`	Part of the Understanding Project Structure example — read it together with the lines before and after.
`package.json`	Part of the Understanding Project Structure example — read it together with the lines before and after.

How it works (big picture)

layout.tsx wraps every page.
page.tsx maps to a URL segment.
public/ files are served as-is.
You will add components/ and lib/ as LearnHub grows.

Do this on your computer

Open each top-level folder in your editor
Read app/layout.tsx and app/page.tsx
Drop an image in public/ and open /filename in the browser
Create an empty components/ folder for later lessons
Read the real-world section and name which part of LearnHub uses this topic.
Run the example locally with npm run dev and confirm the same behavior.
Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

Change a string or route in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error overlay, then fix it.

Remember

app/ = routes, layouts, and route handlers. public/ = static assets at /path. components/ and lib/ are your custom folders.

Common questions

Where do API routes go?

app/api/.../route.ts — covered in a later lesson.

What is .next/?

Build cache — add to .gitignore, never edit manually.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Junior Detailed

Describe a real-world scenario where Performance mattered in a Next.js project.

Short answer: Interviewers want a crisp definition, a practical example from your projects, and awareness of trade-offs—not textbook dumps. Explain a bit more How to structure your answer (60–90 seconds) Define Performan…

Junior Detailed

Explain JavaScript in the context of Next.js.

Short answer: JavaScript runs single-threaded with an event loop. Closures capture lexical scope; promises/async handle I/O without blocking the UI thread. Real-world example (ShopNest) On the ShopNest storefront UI, thi…

Mid Detailed

What are common mistakes teams make with Components when using Next.js?

Senior Detailed

How would you debug a production issue related to State in a Next.js application?

All course Q&A Practice exams

Questions on this lesson 0

No questions yet — be the first to ask!