Tick what your app has. The napkin assembles from the pieces you've walked through, in the rooms they run in. Click any piece to jump back to its deck.
You've operated a model of every layer. Now go find the real one. Each item is a thing that exists in your project right now, that you've scrolled past a hundred times.
Do this with the AI beside you: paste a file and ask "which layer is this, and where does it run?" You'll be able to tell if the answer is wrong. That's the difference from a week ago.
"scripts" block in package.json. What does dev actually run? node"use client" on line 1. What in it needs the browser? next.jsasync component with no "use client" that awaits inside its body. That's a server component reading data. dataapp/ folder. Write down the URL each page.tsx answers. next.jsuseEffect. What's in its dependency array, and why? hooks.env. Which keys start with NEXT_PUBLIC_? Should they? datatsconfig.json. Notice it never mentions the browser. typescriptnpm run build. Read the route table it prints: ○ static, ƒ dynamic. datals node_modules | wc -l. Then find which three you actually import. nodeA few that people usually have at this point, and where they lead:
"Why does everyone say Next.js is complicated now?" The caching model. Two rewrites in three years. It's the one thing here I simplified most.
"Do I need tRPC if server actions exist?" Only when a client component needs typed data on demand. Otherwise, no.
"Could I skip Next.js?" Yes: Vite + React + a separate Node API is MERN with better tools. You'd write by hand what Next.js decides for you.
"What does the AI get wrong most?" The server/client boundary and hook dependencies. Both now have a mechanical reason in your head, which is how you'll catch it.