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 ( +
+

Hello {data}

+
+ ); +} + +// In Next.js 14, async functions handle server-side fetching more effectively +export async function generateMetadata() { + return { + title: 'Home Page', + }; +} + +export async function getServerSideProps() { + return { + props: { data: "world" }, + }; +}`, + }, + "/next.config.js": { + code: `/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, + experimental: { + appDir: true, + }, +} + +module.exports = nextConfig +`, + }, + "/package.json": { + code: JSON.stringify({ + name: "my-app", + version: "0.1.0", + private: true, + scripts: { + dev: "NEXT_TELEMETRY_DISABLED=1 next dev", + build: "next build", + start: "next start", + lint: "next lint", + }, + dependencies: { + next: "^14", // Updated to Next.js 14 + react: "18.2.0", + "react-dom": "18.2.0", + }, + }), + }, + }, + main: "/app/page.js", + environment: "node", +}; \ No newline at end of file