feat(#365 | nextjs template): create nextjs template for create hypergraph command (#383)

Author: cmwhited

.changeset/config.json

@@ -7,6 +7,6 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["events", "next-example", "docs", "hypergraph-vite-react-template"],
+  "ignore": ["events", "next-example", "docs", "hypergraph-vite-react-template", "hypergraph-template-nextjs"],
   "prettier": false
 }

apps/create-hypergraph/.npmignore

@@ -0,0 +1,13 @@
+# Include .gitignore files in templates
+!template-*/.gitignore
+!dist/template-*/.gitignore
+
+# Exclude source files
+src/
+scripts/
+test/
+*.ts
+!*.d.ts
+tsconfig*.json
+vitest.config.ts
+tsdown.config.ts

apps/create-hypergraph/CHANGELOG.md

@@ -1,5 +1,31 @@
 # create-hypergraph
 
+## 0.3.3
+### Patch Changes
+
+- c5822d5: Remove localhost syncServerUri from HypergraphAppProvider. uses default instead
+
+## 0.3.2
+### Patch Changes
+
+- 91eb4fb: Update llms.txt to include nextjs template for visibility to AI agents
+
+## 0.3.1
+### Patch Changes
+
+- 862688a: Update available create hypergraph templates in README to include nextjs for better visibility
+
+## 0.3.0
+### Minor Changes
+
+- fadccd2: Include a nextjs template for selection with the create-hypergraph command.
+  
+  Example usage:
+  
+  ```bash
+  pnpm create hypergraph@latest --template nextjs
+  ```
+
 ## 0.2.0
 ### Minor Changes
 

apps/create-hypergraph/README.md

@@ -41,6 +41,7 @@ Then follow the given prompts.
 - `--template` -> if provided, uses the provided template
   - options:
     - vite-react
+    - nextjs
 - `--package-manager` -> if provided, uses the provided package manager
   - options:
     - pnpm
@@ -59,7 +60,8 @@ pnpm create hypergraph@latest --template vite-react --package-manager pnpm my-hy
 
 ### Currently Supported Templates
 
-- vite + react
+- [vite + react](./template-vite-react/README.md)
+- [nextjs](./template-nextjs/README.md)
 
 ## References
 

apps/create-hypergraph/llms.txt

@@ -59,9 +59,10 @@ create-hypergraph is a CLI tool that scaffolds new Hypergraph-enabled applicatio
 ### Options
 
 - `--template, -t` (optional): Template to scaffold
-  - Available values: `vite-react`
+  - Available values: `vite-react`, `nextjs`
   - Default: prompts user to select
-  - Currently only supports `vite-react` which scaffolds a Vite + React app using @tanstack/react-router
+  - `vite-react`: Scaffolds a Vite + React app using @tanstack/react-router
+  - `nextjs`: Scaffolds a Next.js app with App Router and Hypergraph integration
 
 - `--package-manager, -p` (optional): The package manager to use for installing dependencies
   - Available values: `pnpm`, `bun`, `yarn`, `npm`
@@ -109,6 +110,13 @@ pnpm create hypergraph my-app --skip-install-deps --skip-initialize-git
 - TypeScript enabled
 - Development server with HMR
 
+### nextjs
+- Next.js application with App Router
+- Server and Client Components support
+- Hypergraph integration with client-side providers
+- TypeScript enabled
+- Built-in optimizations and best practices
+
 ## Error Handling
 
 The tool will fail gracefully if:

apps/create-hypergraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-hypergraph",
-  "version": "0.2.0",
+  "version": "0.3.3",
   "description": "CLI toolchain to scaffold a Hypergraph-enabled application with a given template.",
   "type": "module",
   "bin": {
@@ -43,7 +43,7 @@
     "Web3",
     "Knowledge Graph",
     "Hypergraph",
-    "TypeSyncs"
+    "TypeSync"
   ],
   "license": "MIT",
   "engines": {

apps/create-hypergraph/src/Cli.ts

@@ -75,7 +75,7 @@ const createHypergraphApp = Command.make('create-hypergraph-app', {
 
 export const run = Command.run(createHypergraphApp, {
   name: 'create-hypergraph-app',
-  version: '0.2.0',
+  version: '0.3.3',
 });
 
 // ========================
@@ -294,6 +294,11 @@ function resolveTemplate(config: Readonly<RawConfig>) {
             value: 'vite-react',
             description: 'Scaffolds a vite + react app using @tanstack/react-router',
           },
+          {
+            title: 'Nextjs',
+            value: 'nextjs',
+            description: 'Scaffolds a nextjs app',
+          },
         ],
       }).pipe(Effect.map((selected) => selected));
     },

apps/create-hypergraph/src/Domain.ts

@@ -2,7 +2,7 @@ import * as Schema from 'effect/Schema';
 
 export const ALWAYS_SKIP_DIRECTORIES = ['node_modules', '.git'];
 
-export const AvailableFrameworkKey = Schema.Union(Schema.Literal('vite-react'));
+export const AvailableFrameworkKey = Schema.Union(Schema.Literal('vite-react'), Schema.Literal('nextjs'));
 export type AvailableFrameworkKey = typeof AvailableFrameworkKey.Type;
 export const Framework = Schema.Record({
   key: AvailableFrameworkKey,
@@ -18,6 +18,10 @@ export const availableFrameworks = {
     directory: 'template-vite-react',
     skipDirectories: new Set([...ALWAYS_SKIP_DIRECTORIES, '.tanstack', 'dist']),
   },
+  nextjs: {
+    directory: 'template-nextjs',
+    skipDirectories: new Set([...ALWAYS_SKIP_DIRECTORIES, '.next', 'dist']),
+  },
 } as const satisfies Framework;
 export const availableFrameworkKeys = Object.keys(availableFrameworks) as ReadonlyArray<AvailableFrameworkKey>;
 

apps/create-hypergraph/template-nextjs/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+dist
+.next

apps/create-hypergraph/template-nextjs/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 120
+}