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

.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
+}

apps/create-hypergraph/template-nextjs/Components/Layout.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useHypergraphApp, useHypergraphAuth } from '@graphprotocol/hypergraph-react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useLayoutEffect } from 'react';
+
+import { SpacesMenu } from './SpacesMenu';
+import { Button } from './ui/button';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from './ui/NavigationMenu';
+
+export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const navigation = useRouter();
+  const pathname = usePathname();
+
+  const { authenticated } = useHypergraphAuth();
+  const { redirectToConnect, logout } = useHypergraphApp();
+
+  useLayoutEffect(() => {
+    if (pathname.startsWith('/login') || pathname.startsWith('/authenticate-success') || pathname === '/') {
+      return;
+    }
+
+    // Only redirect to login if not authenticated and not already on login page
+    if (!authenticated) {
+      void navigation.push('/login');
+    }
+  }, [authenticated, pathname, navigation]);
+
+  const handleSignIn = () => {
+    redirectToConnect({
+      storage: localStorage,
+      connectUrl: 'https://hypergraph-connect.vercel.app/',
+      successUrl: `${window.location.origin}/authenticate-success`,
+      redirectFn: (url: URL) => {
+        window.location.href = url.toString();
+      },
+    });
+  };
+  const handleLogout = () => {
+    logout();
+    navigation.push('/login');
+  };
+
+  return (
+    <div className="min-h-full flex flex-col">
+      <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 relative z-[9998]">
+        <div className="container mx-auto px-4">
+          <div className="flex h-16 items-center justify-between">
+            <NavigationMenu viewport={false}>
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <NavigationMenuLink
+                    href="/"
+                    className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+                  >
+                    Home
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+
+                <NavigationMenuItem>
+                  <NavigationMenuLink
+                    href="/explore-public-knowledge"
+                    className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+                  >
+                    Explore Public Knowledge
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>My Spaces</NavigationMenuTrigger>
+                  {authenticated ? (
+                    <SpacesMenu />
+                  ) : (
+                    <NavigationMenuContent>
+                      <div className="w-[240px] py-4 text-center text-muted-foreground">
+                        <p>
+                          Sign in to access your
+                          <br />
+                          private and public spaces
+                        </p>
+                      </div>
+                    </NavigationMenuContent>
+                  )}
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+
+            {/* Auth Button */}
+            <div className="flex items-center space-x-4">
+              {authenticated ? (
+                <Button onClick={handleLogout} variant="outline">
+                  Logout
+                </Button>
+              ) : (
+                <Button onClick={handleSignIn}>Sign in with Geo Connect</Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+      <main className="flex-1 container mx-auto px-4 py-6">{children}</main>
+    </div>
+  );
+}

apps/create-hypergraph/template-nextjs/Components/Login/AuthCallback.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export type AuthCallbackProps = {
+  ciphertext: string;
+  nonce: string;
+};
+export function AuthCallback({ ciphertext, nonce }: Readonly<AuthCallbackProps>) {
+  const router = useRouter();
+  const { processConnectAuthSuccess } = useHypergraphApp();
+
+  useEffect(() => {
+    processConnectAuthSuccess({ storage: localStorage, ciphertext, nonce });
+    router.replace('/');
+  }, [ciphertext, nonce, processConnectAuthSuccess, router]);
+
+  return <div>Authenticating …</div>;
+}

apps/create-hypergraph/template-nextjs/Components/Login/LoginButton.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+
+import { Button } from '../ui/button';
+
+export function LoginButton() {
+  const { redirectToConnect } = useHypergraphApp();
+
+  const handleSignIn = () => {
+    redirectToConnect({
+      storage: localStorage,
+      connectUrl: 'https://hypergraph-connect.vercel.app/',
+      successUrl: `${window.location.origin}/authenticate-success`,
+      redirectFn: (url: URL) => {
+        window.location.href = url.toString();
+      },
+    });
+  };
+
+  return (
+    <Button type="button" onClick={handleSignIn} className="w-full bg-primary hover:bg-primary/90">
+      Sign in with Geo Connect
+    </Button>
+  );
+}

apps/create-hypergraph/template-nextjs/Components/Login/LoginForm.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+
+export function LoginForm() {
+  const { redirectToConnect } = useHypergraphApp();
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex flex-col items-center gap-6 p-8 text-center">
+        <p className="text-muted-foreground text-lg">Sign in to access your spaces and start building.</p>
+        <button
+          type="button"
+          className="px-8 py-4 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-base cursor-pointer"
+          onClick={() => {
+            redirectToConnect({
+              storage: localStorage,
+              connectUrl: 'https://hypergraph-connect.vercel.app/',
+              successUrl: `${window.location.origin}/authenticate-success`,
+              redirectFn: (url: URL) => {
+                window.location.href = url.toString();
+              },
+            });
+          }}
+        >
+          Sign in with Geo Connect
+        </button>
+      </div>
+    </div>
+  );
+}