Quick comparison of Next, Nuxt and SvelteKit

Here is a quick note on the differences between Next.js, Nuxt.js and SvelteKit. I will be updating this post as I learn more about these frameworks. The notes may be simplified for brevity, so please refer to the official docs for more information.

Pages Routing

pages/index.js → /
pages/blog/index.js → /blog

pages/about.vue  → /about
pages/posts/[id].vue  → /2

src/routes/+page.svelte → /
src/routes/blog/[slug]/+page.svelte → /blog/slug

Layouts

Layout component with {children}

~/layouts/default.vue with <slot/>

+layout.svelte with <slot/>

Linking

<Link href="/">Home</Link>

<NuxtLink to="/about">About</NuxtLink>

<a href="/">Home</a>

API route

// pages/api/hello.js

export default function handler(req, res) {
  res.json({ result: "hello world" });
}

// ~/server/api/hello.js

export default defineEventHandler(() => "Hello World!");

// src/routes/api/+server.js

export function GET() {
  return { result: "Hello World" };
}

Middleware

Defined in middleware.js in the root directory

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

Defined in ~/middleware directory as defineNuxtRouteMiddleware or definePageMeta({ middleware: [] }) in page component

export default defineNuxtRouteMiddleware((to, from) => {
  // do something
})

hook.server.js or hook.client.js (runs on client) in the root directory, handle function runs everytime server receives a request

export function handle({ request, resolve }) {
  const response = await resolve(event);
  return response;
}

Rendering

SSR

export an async getServerSideProps in a page, returns props to the page component

server first, runs both on server and client

server first, +page.js runs on client, +page.server.js runs on server only

SSG

export an async getStaticProps in a page, returns props to the page component

export default defineNuxtConfig({
  "/": { prerender: true },
  // or
  ssr: false,
});

Use @sveltejs/adapter-static, and in root +layout.js, add export const prerender = true;

SEO and Meta

Modify <head> Metadata API (App router)

export const metadata: Metadata = {
  title: "Next.js",
};

Configure in app.head in nuuxt.config.js, or the useHead, useSeoMeta, useServerSeoMeta composable function and nuxt components.

Return SEO-related data from page load functions, then use it (as $page.data) in a <svelte:head> in your root layout.

References

For more information, check out the official docs: Sveltekit Next Nuxt

To be continued.

lv.

Quick comparison of Next, Nuxt and SvelteKit

References

You may also like: