Learn Next.js 15 App Router as a Bootcamp Student
For Bootcamp students learning Next.js · Based on PedroTech Next.js 15 App Architecture Method
// TL;DR
If you're a bootcamp student who just learned React and now faces Next.js 15, the PedroTech Next.js 15 App Architecture Method gives you a clear mental model instead of memorizing scattered tutorials. You'll learn the four decisions that matter most: where routes live, whether a component is server or client, how to fetch data, and how to add SEO. This guide walks through each concept in plain language with the exact reserved filenames you must know, the pitfalls that trip up every beginner, and a build order you can follow for your first real project.
What do I actually need to learn first in Next.js 15?
Four things: how routes work, what server versus client components are, how data fetching works, and how to add metadata. Everything else builds on these. In Next.js, the folder name inside `/app` is the URL and a `page.tsx` file inside it is the page you see. There's no router file to configure — the folders do it. Two files are mandatory and you must never rename them: `app/layout.tsx` (the HTML shell that wraps everything) and `app/page.tsx` (your homepage).
What are the special filenames I have to memorize?
Next.js watches for exact filenames and gives them superpowers. Learn these five plus one:
- `page.tsx` — the UI for a route
- `layout.tsx` — wraps all routes at its level and below
- `loading.tsx` — shown automatically while data loads
- `error.tsx` — shown when something crashes in that route
- `not-found.tsx` — your custom 404 page
- `route.ts` — used in `app/api/` folders to build backend endpoints
These are case and name sensitive. Naming a file `Page.tsx` or `page.js` when you needed `page.tsx` will silently not work — a classic beginner trap.
How do I know if a component should be server or client?
Every component is a server component by default — it runs on the server and can't use useState, useEffect, or onClick. The moment you need any of those, add `'use client'` at the very top of the file, before your imports. That converts it into a client component that runs in the browser. Rule of thumb: keep pages as server components, and if one small part needs a button click or form input, put just that part in its own `'use client'` file and import it.
How do I fetch data as a beginner?
This is easier than what you learned in plain React. Make your page function `async` and use `await` right inside it:
```tsx
export default async function Page() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
return
- {posts.map(p =>
- {p.title} )}
}
```
No useEffect, no loading state hook. For dynamic routes like `app/posts/[slug]/page.tsx`, get the slug from params (in Next.js 15 params is a Promise, so `await` it). If the fetched item is empty, import `notFound` from `next/navigation` and call it so the page doesn't crash.
What mistakes should I expect to make?
Every beginner hits these, so learn them now: using a hook in a server component (add `'use client'`), using onClick in a server component (same fix), putting your `components` folder inside `/app` (move it out — Next.js turns folders into routes), using a plain `` tag instead of the `Link` component (causes slow full page reloads), and forgetting to whitelist external image domains in `next.config.ts` (your Image component won't load them). Recognizing these saves hours of confusion.
Next step: Run `npx create-next-app`, accept TypeScript, Tailwind, and App Router, then build a two-page blog: a homepage listing posts and a `posts/[slug]` detail page. Add a `loading.tsx`, a `not-found.tsx`, and a metadata export. That single project teaches every core concept above.
// FREQUENTLY ASKED QUESTIONS
Is Next.js harder to learn than plain React?
Not once you understand the four core ideas: file-based routing, server versus client components, async data fetching, and metadata. Some parts are actually easier than plain React — you fetch data without useEffect and get routing for free. The main adjustment is remembering that components are server-side by default and adding 'use client' only when you need interactivity.
Why isn't my new page showing up?
Check that you named the file exactly page.tsx, not Page.tsx or index.tsx, and that it's inside a folder matching your desired URL directly under /app. Also confirm you exported a default function. Next.js file-based routing is name and case sensitive, so small typos in reserved filenames cause pages to silently not appear.
Do I need to know TypeScript to use this method?
Basic TypeScript helps but isn't a blocker for learning. The scaffold enables TypeScript by default, and most beginner concepts work the same. The main TypeScript-specific detail is typing dynamic route params as Promise<{ slug: string }> in Next.js 15. You can pick up the rest gradually as you build.