Project Structure
Every folder, every file. What it's for, what to ignore for now, and where you'll spend most of your time.
After pnpm create next-app, you have ~30 files in your project. Most you will never open. A handful you will open every day. This page tells you which is which.
The Full Layout
Files You'll Touch Often
src/app/page.tsx
This is the home page. The route / renders whatever this file exports as default. It's the first file you'll edit substantively in Project 2.
src/app/layout.tsx
The "shell" that wraps every page — <html>, <body>, fonts, the nav, the footer. You set this up once early on; you rarely revisit it after.
src/app/globals.css
Global CSS. Mostly Tailwind directives plus a few custom rules — global font, default body styles, a couple of reusable utility classes. You touch this 3-4 times in the project.
tailwind.config.ts
Where you declare your school's colours, fonts, and breakpoints as Tailwind tokens (indigo, amber-dark, etc.). Set up once, then everywhere in your code you use bg-indigo and it Just Works. This is the Design Tokens page of this module.
New files you'll create
You'll create more of these than you touch existing ones. Typical adds:
src/app/branches/page.tsx— the/branchesroutesrc/app/admissions/page.tsx— the/admissionsroutesrc/app/about/page.tsx— the/aboutroutesrc/components/Nav.tsx— the navigation componentsrc/components/Footer.tsx— the footer componentsrc/components/BranchCard.tsx— a card used on home and/branchessrc/lib/constants.ts— your school's data (name, branches, contact info)
Files You'll Touch Occasionally
next.config.ts
Where you add security headers (CSP), image domains, redirects. You'll edit it twice in Project 2 — once when you set up the CSP, once when you add a custom domain (if you do).
package.json
When you install a new package (pnpm add resend), this file updates automatically. The only manual edit you might do is changing a script like dev or build.
.gitignore
Already has the right defaults from create-next-app. Add .env*.local if it isn't there. Otherwise leave it alone.
Files You Should Ignore
Don't open these unless you have a specific reason. They are generated, auto-maintained, or framework-level concerns:
.next/— Next's build cache. Delete it freely if dev acts weird; it's regenerated.node_modules/— your dependencies. Treat it as read-only.next-env.d.ts— auto-generated. Don't edit.eslint.config.mjs— lint rules. The defaults are fine.pnpm-lock.yaml— exact dependency versions. Commit it. Never edit by hand.postcss.config.mjs— wired correctly bycreate-next-app. Don't touch.tsconfig.json— TypeScript config. Defaults are fine. The one tweak you'll likely make is enabling stricter options later.
The src/app/ Convention
The folder structure inside src/app/ directly determines your URLs. This is one of the most important conventions in Next.js — internalising it makes the rest of the framework click.
| File path | Live URL |
|---|---|
src/app/page.tsx | / |
src/app/branches/page.tsx | /branches |
src/app/admissions/page.tsx | /admissions |
src/app/about/page.tsx | /about |
src/app/branches/andheri/page.tsx | /branches/andheri |
That's it. Folder name = URL segment. page.tsx inside = the actual page.
Special files inside any folder:
page.tsx— the rendered page at that routelayout.tsx— a shared shell wrapping that route and all its childrenloading.tsx— what to show while the page is loadingnot-found.tsx— what to show for routes that don't exist
You'll use page.tsx constantly. You'll use layout.tsx once (the root layout). You probably won't need the others in Project 2.
The src/ Convention (Inside the App Folder)
Files outside src/app/ are not routes. They're code you import into routes. Conventions:
| Folder | Purpose |
|---|---|
src/components/ | Reusable React components used by multiple pages |
src/lib/ | Pure functions, constants, helpers (no JSX) |
src/hooks/ | Custom React hooks (useSomething) |
src/types/ | Shared TypeScript types |
These are conventions, not rules. Next doesn't enforce them. But they're the conventions every real project uses — including Sahinov.com itself. Stick with them.
Imports — The @/ Alias
You'll see code like:
The @/ is a shorthand for src/. It's configured in tsconfig.json (the paths block). It lets you write absolute imports instead of fragile relative ones like ../../../../lib/constants.
Always use @/. Never use ../../.
What Should Not Be in This Project
Things you might be tempted to add but should not:
| Don't add | Why |
|---|---|
| A database connection | No data is stored in Project 2 |
| Auth (login/signup) | Save for Project 3 |
| State management library (Zustand, Redux) | Static content doesn't need state |
| Form library with backend submission (other than the contact form) | One Resend edge function is enough |
| A CMS like Sanity or Contentful | Content lives in TypeScript constants for now |
| Internationalisation (i18n) | English only |
Every one of these is a real, useful tool — but each is the wrong tool for a 4-page static brochure site. Adding any of them now would make Project 2 less educational and Project 3 less clear.
What's Next
Now you know the layout. The next page is where you set up the design tokens — colours, fonts, spacing — that make the rest of the project feel like your school, not a generic Next.js template.