From d77c19acfd7dc5a26cf2a7c77e3168c522e14276 Mon Sep 17 00:00:00 2001 From: Dave Kiss <1256071+davekiss@users.noreply.github.com> Date: Wed, 4 Sep 2024 15:59:24 -0400 Subject: [PATCH] Introduce nextjs 14 template --- sandpack-client/src/types.ts | 1 + sandpack-react/src/templates/index.tsx | 2 + .../src/templates/node/nextjs-14.ts | 78 +++++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 sandpack-react/src/templates/node/nextjs-14.ts diff --git a/sandpack-client/src/types.ts b/sandpack-client/src/types.ts index 9e4fc8ce8..619c8cdb9 100644 --- a/sandpack-client/src/types.ts +++ b/sandpack-client/src/types.ts @@ -397,4 +397,5 @@ export type SandpackTemplate = | "static" | "solid" | "nextjs" + | "nextjs-14" | "node"; diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx index 5dcbbb2b9..42a450b73 100644 --- a/sandpack-react/src/templates/index.tsx +++ b/sandpack-react/src/templates/index.tsx @@ -1,5 +1,6 @@ import { ASTRO_TEMPLATE } from "./node/astro"; import { NEXTJS_TEMPLATE } from "./node/nexjs"; +import { NEXTJS_14_TEMPLATE } from "./node/nextjs-14"; import { NODE_TEMPLATE } from "./node/node"; import { VITE_TEMPLATE } from "./node/vite"; import { VITE_PREACT_TEMPLATE } from "./node/vite-preact"; @@ -47,6 +48,7 @@ export const SANDBOX_TEMPLATES = { node: NODE_TEMPLATE, nextjs: NEXTJS_TEMPLATE, + "nextjs-14": NEXTJS_14_TEMPLATE, vite: VITE_TEMPLATE, "vite-react": VITE_REACT_TEMPLATE, "vite-react-ts": VITE_REACT_TS_TEMPLATE, diff --git a/sandpack-react/src/templates/node/nextjs-14.ts b/sandpack-react/src/templates/node/nextjs-14.ts new file mode 100644 index 000000000..3384296df --- /dev/null +++ b/sandpack-react/src/templates/node/nextjs-14.ts @@ -0,0 +1,78 @@ +import { commonFiles } from "../common"; + +export const NEXTJS_14_TEMPLATE = { + files: { + ...commonFiles, + "/app/layout.js": { + code: `import '../styles.css' + +export const metadata = { + title: 'My App', + description: 'Generated by create next app', +} + +export default function RootLayout({ children }) { + return ( + +
{children} + + ) +}`, + }, + "/app/page.js": { + code: `export default function Home({ data }) { + return ( +