nextjs example

Author: theoephraim

examples/nextjs/.env.development

@@ -0,0 +1 @@
+OVERRIDE_FROM_ENV_SPECIFIC_FILE=override-from-env-file--dev

examples/nextjs/.env.production

@@ -0,0 +1,2 @@
+OVERRIDE_FROM_ENV_SPECIFIC_FILE=override-from-env-file--prod
+SECRET_OVERRIDE_FROM_ENV_SPECIFIC_FILE=secret-override-from-env-file--prod

examples/nextjs/.env.schema

@@ -0,0 +1,27 @@
+# @currentEnv=$APP_ENV
+# @defaultSensitive=false
+# @generateTypes(lang='ts', path='env.d.ts')
+# ---
+
+APP_ENV=development
+
+NEXT_PUBLIC_FOO=next-public-foo
+
+PUBLIC_FOO=public-foo
+# @sensitive
+SECRET_FOO=secret-foo
+
+DEFAULT_FROM_SCHEMA=default-val-from-schema
+OVERRIDE_FROM_ENV_SPECIFIC_FILE=default-val-from-schema
+# @sensitive
+SECRET_OVERRIDE_FROM_ENV_SPECIFIC_FILE=default-val-from-schema
+OVERRIDE_FROM_UI=default-val-from-schema
+
+
+# --- check type generation for non-string items ---
+# @type=enum(a, b, c)
+STRING_ENUM=a
+# @type=boolean
+BOOL_ITEM=true
+# @type=number
+NUMBER_ITEM=3000

examples/nextjs/.gitignore

@@ -0,0 +1,42 @@
+# 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*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env.local
+.env.*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/.nvmrc

@@ -0,0 +1 @@
+22.15.1

examples/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/nextjs/app/action/action-form.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function ActionForm({
+  getEnvAction,
+}: {
+  getEnvAction: (leak: boolean) => Promise<Record<string, string | undefined>>;
+}) {
+  const [result, setResult] = useState<Record<string, string | undefined> | null>(null);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <button onClick={async () => setResult(await getEnvAction(false))}>
+          Call action (safe)
+        </button>
+        <button onClick={async () => setResult(await getEnvAction(true))}>
+          Call action (leak)
+        </button>
+      </div>
+      {result && (
+        <pre style={{ marginTop: '16px' }}>
+          {JSON.stringify(result, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}

examples/nextjs/app/action/page.tsx

@@ -0,0 +1,27 @@
+import { ENV } from 'varlock/env';
+import ActionForm from './action-form';
+
+async function getEnvAction(leak: boolean) {
+  'use server';
+  return {
+    PUBLIC_FOO: ENV.PUBLIC_FOO,
+    NEXT_PUBLIC_FOO: ENV.NEXT_PUBLIC_FOO,
+    ...leak && {
+      SECRET_FOO: ENV.SECRET_FOO,
+    },
+  };
+}
+
+export default function ActionPage() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+        <h2>Server Action</h2>
+        <ActionForm getEnvAction={getEnvAction} />
+      </main>
+      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+        testing env vars in nextjs
+      </footer>
+    </div>
+  );
+}

examples/nextjs/app/api-edge/route.ts

@@ -0,0 +1,15 @@
+import { ENV } from 'varlock/env';
+
+export const runtime = 'edge';
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const query = new URLSearchParams(url.searchParams);
+
+  return Response.json({
+    PUBLIC_FOO: ENV.PUBLIC_FOO,
+    ...query.get('leak') && {
+      SECRET_FOO: ENV.SECRET_FOO,
+    },
+  });
+}

examples/nextjs/app/api-node/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+import { ENV } from 'varlock/env';
+
+
+export const runtime = 'nodejs';
+
+console.log('secret foo = '+ENV.SECRET_FOO);
+// console.log('secret static = '+ENV.SECRET_STATIC);
+
+export async function GET(request: Request) {
+  console.log('secret foo = '+ENV.SECRET_FOO);
+  // console.log('secret static = '+ENV.SECRET_STATIC);
+
+  const url = new URL(request.url);
+  const query = new URLSearchParams(url.searchParams);
+
+  const r = Response.json({
+    PUBLIC_FOO: ENV.PUBLIC_FOO,
+    ...query.get('leak') && {
+      SECRET_FOO: ENV.SECRET_FOO,
+    }
+  });
+
+  // console.log(r.constructor);
+  // console.log(r.constructor.prototype);
+  // console.log(r instanceof Response);
+  // console.log(Response, globalThis.Response, (globalThis as any).DmnoPatchedResponse);
+
+  return r;
+}