Nuxt → Next.js: the map in my head

If Vue SPA → React SPA felt familiar, Nuxt → Next is the second translation. File routing, layouts, server-ish data - same genre, different dialect.

Scaffold

npx create-next-app@latest my-next-app

Pick TypeScript, App Router, and whatever lint/tailwind options you want. For this tutorial we care about App Router (app/), not the old pages/ router.

Folder brain

app
|-- layout.tsx      # root layout (like Nuxt layouts / app.vue vibes)
|-- page.tsx        # / route
|-- about
|   |-- page.tsx    # /about
|-- blog
|   |-- [slug]
|       |-- page.tsx  # /blog/:slug
|-- loading.tsx     # instant loading UI
|-- error.tsx       # error boundary UI

Comments for the code above:

• page.tsx is the route entry (Nuxt pages/foo.vue)
• folders = URL segments
• layout.tsx wraps children - nested layouts nest in the URL tree
• special files (loading, error, not-found) are framework conventions - very Nuxt-coded-by-convention energy

Root layout

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header>My site</header>
        {children}
      </body>
    </html>
  )
}

As you can see - you own <html> / <body> here. Nuxt hid some of that; Next wants it explicit in the App Router.

A page

// app/page.tsx
export default function HomePage() {
  return <h1>Home</h1>
}

Default export = the page component. No <script setup> - just a function (often async on the server - next chapter).

Nuxt ↔ Next cheat

Nuxt	Next App Router
pages/index.vue	app/page.tsx
pages/blog/[slug].vue	app/blog/[slug]/page.tsx
layouts/default.vue	app/layout.tsx (+ nested layouts)
useAsyncData / useFetch	fetch in Server Components / route handlers
navigateTo / NuxtLink	redirect / next/link
middleware	middleware.ts / proxy patterns
Nitro server routes	Route Handlers app/api/.../route.ts
modules ecosystem	…different ecosystem (plan accordingly)

Mental shift preview

Nuxt 3 is Vue everywhere with good server story. Next App Router defaults to Server Components - your components don't ship to the client unless you opt in with 'use client'.

That's the big one. Coming up next.

Enjoy!