#Migrating from Next.js

Krate's pages, routing, and <Link> semantics mirror Next.js closely, so most files need small edits. The biggest conceptual change: there is no React runtime — components are plain functions returning JSX, and state uses signals.

#Concept mapping

#Steps

1. Scaffold & install

npx create-krate-app@latest my-site
   cd my-site && npm install

1. Move pages. Copy app//page.tsx (or pages/) into src/pages/, renaming index and stripping the page filename:

app/page.tsx                  -> src/pages/index.tsx
   app/about/page.tsx            -> src/pages/about.tsx
   app/blog/[slug]/page.tsx      -> src/pages/blog/[slug].tsx

Wrap app/layout.tsx content in src/pages/_layout.tsx.

1. Convert state. Replace hooks:

// Next.js
   const [n, setN] = useState(0);
   // Krate
   const [n, setN] = createSignal(0);
   // read by calling: n()  (not n)

1. Fix attribute names. className → class; htmlFor → for.

1. Links & images. Replace next/link / next/image imports with the globals <Link href="…"> / <Image src width height alt>.

1. Data fetching. Replace fetch in server components with createResource or build-time reads; see Data Fetching.

1. API routes. Move app/api//route.ts handlers to src/api/.ts exporting GET/POST/etc. Prefer Go routes (src/api/*.go) for hot endpoints.

1. Config. Translate next.config.js to krate.config.ts (redirects, rewrites, headers, images, env).

1. Build & check.

krate build && krate check

#Gradual adoption via React interop

React interop is always on. Krate automatically rewrites React hooks (useState, useEffect, useMemo, useReducer, useRef, useCallback, useContext, useId) and React.* member calls to signal-based equivalents during compilation, and auto-calls bare reads ({count} → count()), so files deeply tied to React hooks compile without config changes. This is a migration aid, not a full React runtime — see React Compatibility.

#What is intentionally different

• No getServerSideProps / getStaticProps — use render modes (export const config = { ssr: true }) and createResource.
• No React context; share state via module-level signals or props.
• Streaming uses <Suspense> with region rendering (see Rendering).

#See also

• Getting Started
• Routing & Layouts
• Reactivity