feat: add Next.js App Router example

Author: ImBIOS

Diff for: deploy/docker-compose/todo-nextjs-app.yaml

@@ -0,0 +1,15 @@
+services:
+  todo-backend:
+    build: ../../frontend/examples/express
+    ports:
+      - "8002:8002"
+    environment:
+      - HANKO_API_URL=http://hanko:8000
+    networks:
+      - intranet
+  todo-frontend:
+    build: ../../frontend/examples/nextjs-app
+    ports:
+      - "8889:8889"
+    networks:
+      - intranet

Diff for: frontend/examples/README.md

@@ -10,36 +10,54 @@ It contains:
 - an example [express](express) backend - this is a simple version of the well-known todo app
 - example frontend applications using the following frameworks:
   - [Angular](angular)
-  - [Next.js](nextjs)
+  - [Next.js](nextjs) (Pages Router)
+  - [Next.js App Router](nextjs-app)
   - [React](react)
   - [Vue](vue)
   - [Svelte](svelte)
 
 ## How to run
+
 ### Manual
+
 1. Start the Hanko API (see the instructions on how to run the API [in Docker](../../backend/README.md#Docker) or [from Source](../../backend/README.md#from-source))
 2. Start the express backend (see the [README](express) for the express backend)
 3. Start one of the frontend applications (see the README for the app of your choice)
 
 ### Docker Compose
 
 #### React
+
 ```
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-react.yaml -p "hanko-todo-react" up --build
 ```
+
 #### Angular
+
 ```
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-angular.yaml -p "hanko-todo-angular" up --build
 ```
-#### Next.js
+
+#### Next.js (Pages Router)
+
 ```
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-nextjs.yaml -p "hanko-todo-nextjs" up --build
 ```
+
+#### Next.js (App Router)
+
+```
+docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-nextjs-app.yaml -p "hanko-todo-nextjs-app" up --build
+```
+
 #### Vue
+
 ```
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-vue.yaml -p "hanko-todo-vue" up --build
 ```
+
 #### Svelte
+
 ```
 docker compose -f deploy/docker-compose/base.yaml -f deploy/docker-compose/todo-svelte.yaml -p "hanko-todo-svelte" up --build
 ```

Diff for: frontend/examples/nextjs-app/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.next

Diff for: frontend/examples/nextjs-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Diff for: frontend/examples/nextjs-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Diff for: frontend/examples/nextjs-app/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine AS deps
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:18-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV production
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+CMD ["npm", "start"]

Diff for: frontend/examples/nextjs-app/README.md

@@ -0,0 +1,43 @@
+# Hanko Next.js App Router Example
+
+This is an example application that shows how to use Hanko with Next.js App Router.
+
+## Overview
+
+The application is a simple todo app that demonstrates:
+
+- Integration of Hanko web components
+- JWT validation in the backend
+- App Router architecture with client components
+- Authentication flow
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18 or later
+- A running Hanko API instance
+- The example Express backend
+
+### Environment Variables
+
+Create a `.env` file in the root directory with:
+
+```
+NEXT_PUBLIC_HANKO_API=http://localhost:8000
+NEXT_PUBLIC_TODO_API=http://localhost:8001
+```
+
+### Installation
+
+```bash
+npm install
+```
+
+### Running the App
+
+```bash
+npm start
+```
+
+The application will start on http://localhost:8889.

Diff for: frontend/examples/nextjs-app/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import "../styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "Hanko Next.js App Router Example",
+  description: "Hanko authentication example with Next.js App Router",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" href="/favicon.png" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

Diff for: frontend/examples/nextjs-app/app/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useState } from "react";
+import HankoAuth from "../components/HankoAuth";
+import styles from "../styles/Todo.module.css";
+
+export default function Home() {
+  const [error, setError] = useState<Error | null>(null);
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.error}>{error?.message}</div>
+      <HankoAuth setError={setError} />
+    </div>
+  );
+}

Diff for: frontend/examples/nextjs-app/app/profile/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styles from "../../styles/Todo.module.css";
+
+import { Hanko } from "@teamhanko/hanko-elements";
+import HankoProfile from "../../components/HankoProfile";
+import { SessionExpiredModal } from "../../components/SessionExpiredModal";
+
+export default function Profile() {
+  const router = useRouter();
+  const [hankoClient, setHankoClient] = useState<Hanko>();
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const api = process.env.NEXT_PUBLIC_HANKO_API!;
+
+  const logout = () => {
+    hankoClient?.user.logout().catch((e) => {
+      setError(e);
+    });
+  };
+
+  const redirectToTodos = () => {
+    router.push("/todo");
+  };
+
+  const redirectToLogin = useCallback(() => {
+    router.push("/");
+  }, [router]);
+
+  useEffect(() => {
+    if (!hankoClient) {
+      return;
+    }
+
+    if (!hankoClient.session.isValid()) {
+      redirectToLogin();
+    }
+  }, [hankoClient, redirectToLogin]);
+
+  useEffect(() => {
+    setHankoClient(new Hanko(api));
+  }, [api]);
+
+  useEffect(() => {
+    if (hankoClient) {
+      hankoClient.onUserLoggedOut(() => {
+        redirectToLogin();
+      });
+    }
+  }, [hankoClient, redirectToLogin]);
+
+  useEffect(() => {
+    if (hankoClient) {
+      hankoClient.onSessionExpired(() => {
+        modalRef.current?.showModal();
+      });
+    }
+  }, [hankoClient]);
+
+  return (
+    <>
+      <SessionExpiredModal ref={modalRef} />
+      <nav className={styles.nav}>
+        <button onClick={logout} className={styles.button}>
+          Logout
+        </button>
+        <button disabled className={styles.button}>
+          Profile
+        </button>
+        <button onClick={redirectToTodos} className={styles.button}>
+          Todos
+        </button>
+      </nav>
+      <div className={styles.content}>
+        <h1 className={styles.headline}>Profile</h1>
+        <div className={styles.error}>{error?.message}</div>
+        <HankoProfile setError={setError} />
+      </div>
+    </>
+  );
+}