feat: add simple example of a nextjs project integrating the middleware, update eslint to ignore examples folder

QAComet · QAComet · commit 3afaa80b2a16 · 2024-12-08T15:03:37.000-07:00
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -7,7 +7,13 @@ export default tseslint.config(
   eslint.configs.recommended,
   tseslint.configs.recommended,
   {
-    ignores: [".husky/", "coverage/", "dist/", "docs/", "eslint.config.mjs"],
-    //files: ["src/**/*.ts"],
+    ignores: [
+      ".husky/",
+      "coverage/",
+      "dist/",
+      "docs/",
+      "examples/",
+      "eslint.config.mjs",
+    ],
   },
 );
diff --git a/examples/simple-example/.eslintrc.json b/examples/simple-example/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
diff --git a/examples/simple-example/.gitignore b/examples/simple-example/.gitignore
@@ -0,0 +1,40 @@
+# 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
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/simple-example/README.md b/examples/simple-example/README.md
@@ -0,0 +1,11 @@
+# About
+
+This is an example project using Next.js's app router and the `@qacomet/next-api-middleware` library giving a simple demonstration of the middleware together with basic API routes. There are two examples given, one using a class-based handler and another using a file-based handler.
+
+The main relevant files are
+
+```sh
+app/middleware/index.ts
+app/dashboard/route.ts
+app/dashboard/[userId]/route.ts
+```
diff --git a/examples/simple-example/app/dashboard/[userId]/route.ts b/examples/simple-example/app/dashboard/[userId]/route.ts
@@ -0,0 +1,12 @@
+import { middleware } from "@/app/middleware";
+import { NextRequest, NextResponse } from "next/server";
+import { type NextRouteHandlerContext } from "@qacomet/next-api-middleware";
+
+const getHandler = async function (_request: NextRequest, context: NextRouteHandlerContext) {
+  const params = await context!.params;
+  console.log("getHandler")
+  return new NextResponse(`params: ${JSON.stringify(params)}`);
+}
+
+export const { GET } = middleware.routes({ GET: getHandler }).build();
+
diff --git a/examples/simple-example/app/dashboard/route.ts b/examples/simple-example/app/dashboard/route.ts
@@ -0,0 +1,17 @@
+import { middleware } from "@/app/middleware";
+import { NextResponse } from "next/server";
+
+class Handlers  {
+  data: string
+  constructor () {
+    this.data = "Handlers data";
+    this.GET = this.GET.bind(this);
+  }
+
+  async GET () {
+    console.log("Instance<Handlers>.GET", this.data);
+    return new NextResponse(`data: ${this.data}`);
+  }
+}
+
+export const { GET } = middleware.routes(Handlers).build();
diff --git a/examples/simple-example/app/layout.tsx b/examples/simple-example/app/layout.tsx
@@ -0,0 +1,14 @@
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/examples/simple-example/app/middleware/index.ts b/examples/simple-example/app/middleware/index.ts
@@ -0,0 +1,12 @@
+import { RouteMiddleware, type MiddlewareNextFunction } from "@qacomet/next-api-middleware";
+import { NextRequest } from "next/server";
+
+export const middleware = RouteMiddleware.from({
+  name: 'TestMiddleware',
+  middleware: async function (_req: NextRequest, next: MiddlewareNextFunction) {
+    console.log("before");
+    const resp = await next();
+    console.log("after");
+    return resp;
+  }
+});
diff --git a/examples/simple-example/app/page.tsx b/examples/simple-example/app/page.tsx
@@ -0,0 +1,9 @@
+
+export default function Home() {
+  return (
+    <div style={{padding: '32px', display: 'flex', flexDirection: 'column', gap: '8px'}}>
+      <div>Check out <a href="/dashboard">/dashboard/</a></div>
+      <div>Check out <a href="/dashboard/1234/">/dashboard/:userId/</a></div>
+    </div>
+  )
+}
diff --git a/examples/simple-example/next.config.ts b/examples/simple-example/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/examples/simple-example/package-lock.json b/examples/simple-example/package-lock.json
diff --git a/examples/simple-example/package.json b/examples/simple-example/package.json
diff --git a/examples/simple-example/postcss.config.mjs b/examples/simple-example/postcss.config.mjs
diff --git a/examples/simple-example/tailwind.config.ts b/examples/simple-example/tailwind.config.ts
diff --git a/examples/simple-example/tsconfig.json b/examples/simple-example/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": ["next/core-web-vitals", "next/typescript"]`
	`3`	`+}`