impr(@typegpu/cli): Next.js template

packages/typegpu-cli/src/options.ts

@@ -10,6 +10,7 @@ export const PROJECT_TEMPLATES = [
   { value: 'vite-bare', label: 'Vite (Bare)' },
   { value: 'vite-complex', label: 'Vite (Complex - Domain Warping)' },
   { value: 'vite-react', label: 'Vite + React (Bare)' },
+  { value: 'nextjs-bare', label: 'Next.js (Bare)' },
   { value: 'expo-bare', label: 'Expo RN (Bare)' },
 ] as const;
 

packages/typegpu-cli/templates/template-nextjs-bare/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

packages/typegpu-cli/templates/template-nextjs-bare/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

packages/typegpu-cli/templates/template-nextjs-bare/_gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+*.pem
+.agents
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/typegpu-cli/templates/template-nextjs-bare/_nvmrc

@@ -0,0 +1 @@
+24

packages/typegpu-cli/templates/template-nextjs-bare/_oxfmtrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "ignorePatterns": [".agents/**", "AGENTS.md", "CLAUDE.md"]
+}

packages/typegpu-cli/templates/template-nextjs-bare/_package.json

@@ -0,0 +1,41 @@
+{
+  "name": "typegpu-nextjs-bare-project",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "check": "oxlint && oxfmt --check",
+    "fix": "oxlint --fix && oxfmt",
+    "types": "tsc --p ./tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@typegpu/react": "^0.11.2",
+    "next": "16.2.7",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typegpu": "^0.11.9"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@webgpu/types": "^0.1.70",
+    "eslint-plugin-typegpu": "^0.11.1",
+    "oxfmt": "^0.49.0",
+    "oxlint": "^1.64.0",
+    "tailwindcss": "^4",
+    "typescript": "npm:tsover@6.0.1",
+    "unplugin-typegpu": "^0.11.6"
+  },
+  "overrides": {
+    "typescript": "npm:tsover@6.0.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "typescript": "npm:tsover@6.0.1"
+    }
+  }
+}

packages/typegpu-cli/templates/template-nextjs-bare/_vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode"]
+}

packages/typegpu-cli/templates/template-nextjs-bare/_vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+
+  "oxc.configPath": "oxlint.config.ts",
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "oxc.lint.run": "onType",
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "never",
+    "source.format.oxc": "always",
+    "source.fixAll.oxc": "always"
+  }
+}

packages/typegpu-cli/templates/template-nextjs-bare/_zed/settings.json

@@ -0,0 +1,58 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{
+  "lsp": {
+    "vtsls": {
+      "settings": {
+        "typescript": {
+          "tsdk": "node_modules/typescript/lib"
+        }
+      }
+    },
+    "oxlint": {
+      "initialization_options": {
+        "settings": {
+          "configPath": "./oxlint.config.ts",
+          "run": "onType",
+          "fixKind": "safe_fix"
+        }
+      }
+    },
+    "oxfmt": {
+      "initialization_options": {
+        "settings": {
+          "fmt.configPath": ".oxfmtrc.json"
+        }
+      }
+    }
+  },
+  "languages": {
+    "TypeScript": {
+      "format_on_save": "on",
+      "prettier": { "allowed": false },
+      "formatter": [{ "language_server": { "name": "oxfmt" } }]
+    },
+    "TSX": {
+      "format_on_save": "on",
+      "prettier": { "allowed": false },
+      "formatter": [{ "language_server": { "name": "oxfmt" } }]
+    },
+    "JavaScript": {
+      "format_on_save": "on",
+      "prettier": { "allowed": false },
+      "formatter": [{ "language_server": { "name": "oxfmt" } }]
+    },
+    "JSON": {
+      "format_on_save": "on",
+      "prettier": { "allowed": false },
+      "formatter": [{ "language_server": { "name": "oxfmt" } }]
+    },
+    "JSONC": {
+      "format_on_save": "on",
+      "prettier": { "allowed": false },
+      "formatter": [{ "language_server": { "name": "oxfmt" } }]
+    }
+  }
+}

packages/typegpu-cli/templates/template-nextjs-bare/app/Shader.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { useConfigureContext, useFrame, useRoot } from '@typegpu/react';
+import { common, d } from 'typegpu';
+
+export default function Shader({ className }: { className?: string }) {
+  const { ref, ctxRef } = useConfigureContext({ autoResize: true, alphaMode: 'premultiplied' });
+
+  const root = useRoot();
+  const renderPipeline = useMemo(
+    () =>
+      root.createRenderPipeline({
+        vertex: common.fullScreenTriangle,
+        fragment: ({ uv }) => {
+          'use gpu';
+          return d.vec4f(0.55, uv, 1);
+        },
+      }),
+    [root],
+  );
+
+  useFrame(() => {
+    if (!ctxRef.current) return;
+    renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3);
+  });
+
+  return <canvas ref={ref} className={className} />;
+}

packages/typegpu-cli/templates/template-nextjs-bare/app/globals.css

@@ -0,0 +1,64 @@
+@import 'tailwindcss';
+
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+}
+
+@theme inline {
+  --color-bg: var(--bg);
+  --color-text: var(--text);
+  --color-text-h: var(--text-h);
+  --color-border: var(--border);
+  --color-social: var(--social-bg);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+}
+
+.ticks::before,
+.ticks::after {
+  content: '';
+  position: absolute;
+  top: -4.5px;
+  border: 5px solid transparent;
+}
+
+.ticks::before {
+  left: 0;
+  border-left-color: var(--border);
+}
+
+.ticks::after {
+  right: 0;
+  border-right-color: var(--border);
+}

packages/typegpu-cli/templates/template-nextjs-bare/app/layout.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Metadata } from 'next';
+
+// oxlint-disable-next-line import/no-unassigned-import
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'typegpu-nextjs-bare-project',
+  description: 'TypeGPU + Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`h-full antialiased`}>
+      <body className="flex min-h-full flex-col font-sans">{children}</body>
+    </html>
+  );
+}