What maps to what
What maps to what in the Next.js to ShadowJS guide.
| Next.js | Dusk | Section |
|---|---|---|
app/layout.tsx, page.tsx |
routes/_layout.tsx, routes/index.tsx (and routes/name.tsx) |
Layouts and pages |
[id], [...slug], [[...slug]], (group) |
[id].tsx, [...slug].tsx (at least one segment), [[...slug]].tsx (also matches the folder), (group)/ |
Route patterns |
loading.tsx, error.tsx, not-found.tsx |
pending, error, notFound exports |
Pending, error and not found |
async Server Component that reads data |
A loader that calls a server function |
Server Components |
"use client" |
Not needed: every component runs on the server and in the browser | Server Components |
searchParams |
validateSearch and useSearch |
Search params |
app/api/**/route.ts |
routes/api/**.ts with method exports |
Route handlers |
Server Actions, "use server" |
serverFn(...), "use server" |
Server Actions |
middleware.ts |
middleware in src/entry-server.ts |
Middleware |
metadata, generateMetadata, viewport |
The same exports in a route or layout (Dusk metadata) | Metadata |
next/link, next/navigation |
A, the router hooks |
Navigation |
next/image, next/font |
Image, images() and defineFonts |
Images and fonts |
NEXT_PUBLIC_*, process.env |
DUSK_PUBLIC_* (or a name in .env.public) through import.meta.env; defineEnv on the server |
Environment variables |
getServerSideProps, getStaticProps, getStaticPaths |
loader; prerender = [...] |
Pages Router |
revalidatePath, router.refresh() |
router.invalidate() |
Server Actions |
@clerk/nextjs |
@shadow-js/clerk, @shadow-js/clerk/server |
Auth with Clerk |
convex/react, convex/nextjs |
@shadow-js/convex |
Data with Convex |
next start, Vercel |
dusk start (Node adapter), or serve() from @shadow-js/dusk/node in a file you own; Docker; static export |
Deployment |