Next.js보다
SvelteKit이 더 좋은 이유

Next.js는 React 생태계의 풀스택 프레임워크로서 확고한 위치를 차지하고 있다. App Router, Server Components, Server Actions 등 강력한 기능들을 제공한다.

하지만 그 강력함에는 대가가 따른다. 복잡한 캐싱 전략, 끊임없이 변하는 API, 예측하기 어려운 렌더링 동작. Next.js가 점점 복잡해지는 동안, SvelteKit은 단순함을 무기로 조용히 성장해왔다.

이 글은 두 프레임워크를 실무에서 사용한 경험을 바탕으로, SvelteKit이 더 나은 선택이 될 수 있는 이유를 풀스택 관점에서 비교한다.

두 프레임워크 모두 파일 기반 라우팅을 사용하지만, 접근 방식이 다르다. Next.js의 App Router는 유연하지만 복잡하고, SvelteKit은 규칙이 명확하여 예측 가능하다.

app/
├── page.tsx
├── layout.tsx
├── loading.tsx
├── error.tsx
├── not-found.tsx
├── template.tsx
├── default.tsx
└── blog/
    ├── page.tsx
    └── [slug]/
        └── page.tsx

routes/
├── +page.svelte
├── +page.server.ts
├── +layout.svelte
├── +error.svelte
└── blog/
    ├── +page.svelte
    └── [slug]/
        ├── +page.svelte
        └── +page.server.ts

SvelteKit의 + 접두사 컨벤션은 라우트 파일과 컴포넌트 파일을 명확히 구분한다. +page.svelte는 UI, +page.server.ts는 서버 로직. 파일 이름만 보고도 역할을 즉시 알 수 있다.

Next.js의 App Router에서는 page.tsx, layout.tsx, loading.tsx, error.tsx, template.tsx, default.tsx, not-found.tsx 등 다양한 특수 파일이 복잡하게 상호작용하며, 이들 사이의 우선순위를 이해해야 한다.

웹 개발에서 폼은 빠질 수 없는 요소다. 두 프레임워크 모두 서버 측 폼 처리를 지원하지만, SvelteKit의 Form Actions는 웹 표준에 더 가깝고 점진적 향상을 자연스럽게 지원한다.

// action.ts
'use server'

async function createPost(
  formData: FormData
) {
  // 'use server' 디렉티브 필수
  const title =
    formData.get('title');
  await db.post.create({
    data: {title}
  });
  revalidatePath('/blog');
}

// +page.server.ts
export const actions = {
  default: async ({
    request
  }) => {
    const data = await
      request.formData();
    const title =
      data.get('title');
    await db.post.create({
      data: {title}
    });
    return {success: true};
  }
};

SvelteKit의 폼 처리는 HTML의 기본 <form> 동작을 존중한다. use:enhance를 추가하면 JavaScript가 활성화된 환경에서 AJAX 방식으로 자동 업그레이드되지만, JS가 비활성화되어도 폼은 정상 동작한다. 이것이 진정한 점진적 향상이다.