Skip to main content
JPN Web Design uses environment variables to keep secrets out of source code. This page documents every variable, explains where to obtain the values, and shows how to configure them for local development and production.

​
Required variables

​
GROQ_API_KEY
string
required
Authenticates requests to Groq’s API. The AI chatbot endpoint (app/api/chat/route.ts) reads this value at runtime to initialize the Groq client.The portfolio renders fully without this key, but every chatbot request will fail with an authentication error if it is missing or invalid.Example format (not a real key):
gsk_A1b2C3d4E5f6G7h8I9j0K1l2M3n4O5p6Q7r8S9t0
Where to get it:
  1. Go to console.groq.com and sign in or create a free account.
  2. Navigate to API Keys in the left sidebar.
  3. Click Create API Key, give it a name, and copy the value.
Groq offers a generous free tier suitable for personal portfolios.

​
Local development

Create a .env.local file in the root of the project and add your variables there. Next.js loads this file automatically during pnpm dev.
.env.local
# Groq API Key — required for the AI chatbot
GROQ_API_KEY=gsk_your_actual_key_here
Never commit .env.local to your repository. The file is already listed in .gitignore under the pattern .env*, so Git will ignore it by default. Do not remove that entry or override it.
1

Create the file

In the project root, create .env.local:
touch .env.local
2

Add your Groq API key

Open .env.local and paste your key:
.env.local
GROQ_API_KEY=gsk_your_actual_key_here
3

Start the development server

pnpm dev
Open http://localhost:3000. The chatbot drawer should now respond to messages.

​
Production (Vercel)

Vercel injects environment variables at build time and runtime. They are never stored in your repository.
1

Open your project settings

In the Vercel dashboard, select your project and click Settings in the top navigation.
2

Navigate to Environment Variables

Click Environment Variables in the left sidebar.
3

Add GROQ_API_KEY

Fill in the form:
  • Key: GROQ_API_KEY
  • Value: your Groq API key
  • Environments: select Production, Preview, and Development as needed
Click Save.
4

Redeploy

Environment variable changes take effect on the next deployment. Trigger a redeploy from Deployments → Redeploy or push a new commit to main.
If you set or update GROQ_API_KEY after an existing deployment, you must redeploy for the change to take effect. Vercel does not hot-reload environment variables.

​
Optional variables

​
NEXT_PUBLIC_* variables

Next.js exposes environment variables prefixed with NEXT_PUBLIC_ to the browser at build time. Use this pattern for values that are safe to be public (e.g., a public site URL, a public analytics ID).
.env.local
# Example: expose your site's canonical URL to client-side code
NEXT_PUBLIC_SITE_URL=https://yourname.vercel.app
Do not prefix GROQ_API_KEY with NEXT_PUBLIC_. API keys must remain server-side only. The app/api/chat/route.ts route runs exclusively on the server, so GROQ_API_KEY is never sent to the browser.

​
Vercel Analytics

The project already includes @vercel/analytics as a dependency. When deployed on Vercel, Analytics is enabled automatically — no extra environment variable is required. You can view traffic data in the Analytics tab of your Vercel project dashboard. To enable analytics on other platforms or in custom setups, refer to the @vercel/analytics documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us