ShadowJSShadowJSv1.0.0
[]previous and next page

Migration checklist

Migration checklist in the Next.js to ShadowJS guide.

For agentsUpdated
  1. Create the Vite app with dusk(), set jsxImportSource to @shadow-js/web and types to ["vite/client", "node"].
  2. Move app/**/page.tsx and layout.tsx to routes/**: index.tsx, name.tsx, [param].tsx, _layout.tsx.
  3. Port each page with React to ShadowJS: state, effects, forms, lists.
  4. Move data access into server functions (serverFn), and call them from loaders and event handlers.
  5. Replace next/link with A, next/navigation with the router hooks; metadata, generateMetadata and viewport keep their names.
  6. Move app/api/**/route.ts to routes/api/**, and Server Actions to server functions with an input schema.
  7. Move middleware.ts to the middleware array in src/entry-server.ts; replace each matcher with a path check.
  8. Rename NEXT_PUBLIC_* to DUSK_PUBLIC_*, or move a value the browser may read to .env.public without a prefix. Read the public values with import.meta.env, and describe server variables with defineEnv. A NEXT_PUBLIC_* name that must keep its name can be listed in env.public.prefixes in dusk.config.ts.
  9. Replace next/image with Dusk’s Image and optimizer, or a plain img; replace next/font with defineFonts or @font-face.
  10. Replace @clerk/nextjs with @shadow-js/clerk, and convex/react with @shadow-js/convex.
  11. Set security.allowedHosts, cookieSecrets and a CSP; read the production checklist.
  12. Port the tests with @shadow-js/dusk/testing and @shadow-js/testing; run the new app next to the old one before moving traffic.