First Principles Checklist

"I really regret learning Next.js so soon." — A developer on Reddit

This final chapter distills everything into actionable guidance: what you should know, what you should learn, and when Next.js is (and isn't) the right choice.

What to Learn Before Next.js

Many developers jump into Next.js too early. Here's what you should know first:

1. JavaScript Fundamentals

Before any framework:

2. How the Web Works

The web platform Next.js builds on:

3. React Fundamentals

Next.js is React—you can't skip this:

4. CSS and Styling

You'll need to style your applications:

Next.js has first-class TypeScript support:

The Fundamentals That Never Change

No matter how much frameworks evolve, these principles remain:

1. Performance Is User Experience

From Guillermo Rauch's Seven Principles:

2. The Rendering Equation

Every framework is solving the same equation:

Final UI = f(data, state, time)

Understanding when and where this equation is evaluated (server, client, build time, request time) is the core skill.

3. The Cache Is Always the Problem

Caching issues cause more production bugs than code bugs. Understand:

4. Errors Are Information

Good error handling isn't just try/catch. It's:

5. Security Is Non-Negotiable

Never trust:

The Next.js Mental Model

Server vs. Client

Server (default in App Router):

Client (marked with 'use client'):

The Rendering Modes Decision Tree 

Does the content change per user/request?
├── No → Does it change at all?
│   ├── No → Static (SSG)
│   └── Yes → How often?
│       ├── Rarely → ISR (revalidate: 3600)
│       └── Often → ISR (revalidate: 60)
└── Yes → Is part of it static?
    ├── No → SSR
    └── Yes → PPR (static shell + dynamic holes)

When to Use Each Rendering Mode

Mode Use When Example
SSG Content never changes Marketing pages, docs
ISR Content changes periodically Blog posts, product pages
SSR Content is personalized Dashboards, authenticated pages
PPR Mix of static and dynamic E-commerce (static product, dynamic price)
CSR After-load interactivity Complex forms, real-time features

When to Use Next.js

Good Fit:

Less Ideal:

Red Flags:

Common Beginner Mistakes

1. Using Client Components Everywhere 

// Don't default to this:
'use client'; // Why? Do you actually need client interactivity?

Start with Server Components. Add 'use client' only when you need:

2. Fetching Data in useEffect 

// Old pattern (still works, but not ideal in App Router):
function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(setData);
  }, []);
}

// Better in App Router:
async function Page() {
  const data = await fetch('/api/data');
  return <div>{data}</div>;
}

3. Not Using Loading States 

// Always provide loading UI:
// loading.js
export default function Loading() {
  return <Skeleton />;
}

4. Ignoring Error Boundaries 

// Always handle errors:
// error.js
'use client';
export default function Error({ error, reset }) {
  return <div>Something went wrong. <button onClick={reset}>Try again</button></div>;
}

5. Over-Engineering Early

The Vibe Coder's Knowledge Stack

Layer 1: Must Know (Can't Outsource to AI)

Layer 2: Should Know (AI Can Help, But You Guide)

Layer 3: AI Can Handle (With Your Review)

Quick Reference Card

File Conventions (App Router)

File Purpose
page.js Route UI
layout.js Persistent layout
loading.js Loading state
error.js Error boundary
not-found.js 404 page
route.js API endpoint

Common Imports 

import { NextRequest, NextResponse } from 'next/server';
import { cookies, headers } from 'next/headers';
import { redirect, notFound } from 'next/navigation';
import { revalidatePath, revalidateTag } from 'next/cache';
import Image from 'next/image';
import Link from 'next/link';

Caching Cheatsheet (v15+) 

// No caching (default in v15+)
fetch(url);

// Cache forever
fetch(url, { cache: 'force-cache' });

// Never cache
fetch(url, { cache: 'no-store' });

// Revalidate after N seconds
fetch(url, { next: { revalidate: 60 } });

// Tag for on-demand revalidation
fetch(url, { next: { tags: ['collection'] } });

Final Thoughts

The Knowledge Investment

Learning Next.js deeply—its history, its philosophy, its internals—pays dividends that tutorials never mention:

  1. You debug faster — You understand why things break
  2. You architect better — You know the trade-offs
  3. You collaborate with AI effectively — You can guide and review
  4. You adapt to changes — Frameworks evolve, principles don't
  5. You make informed decisions — When to use it, when to skip it

The swyx Approach

Remember swyx's advice:

"Your tools will stop serving you well when your needs go beyond the scale and speed assumptions they were designed for. In those cases, knowing the design patterns that underlie those tools, and being able to look for new tools or make your own will come in extremely helpful."

You now have the knowledge graph. You know the who, the what, the why, the how, and the regrets. You understand the epochs and the evolution.

You're not just a Next.js user. You're someone who understands their tools.

Key Takeaways

Welcome to the new era of web development. Now go build something.

Sources