When will you use this?

Use when you are ready to put LearnHub online for users or employers to try.

• Publishing means pushing LearnHub to Vercel, Docker, or Azure so students can access it online.
• CI/CD runs npm test and npm run build automatically on every git push.

Real-world: HDFC-style banking dashboard

The Banking team building HDFC-style banking dashboard uses Environment Variables to apply Environment Variables when building accounts, transfers, and statement views. account holders never see the TypeScript files — they just get a fast, reliable accounts, transfers, and statement views.

Production-style code

# .env.local (never commit)
DATABASE_URL="postgresql://localhost:5432/learnhub"
NEXTAUTH_SECRET="long-random-string"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

// app/api/health/route.ts — server only
export async function GET() {
  const hasDb = !!process.env.DATABASE_URL;
  return Response.json({ ok: hasDb });
}

What happens in production: In HDFC-style banking dashboard, getting Environment Variables right means account holders trust the accounts, transfers, and statement views every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

# .env.local (never commit)
DATABASE_URL="postgresql://localhost:5432/learnhub"
NEXTAUTH_SECRET="long-random-string"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

// app/api/health/route.ts — server only
export async function GET() {
  const hasDb = !!process.env.DATABASE_URL;
  return Response.json({ ok: hasDb });
}

Line-by-line walkthrough

How it works (big picture)

• Server Route Handlers and Server Actions read any env var.
• Client Components only see NEXT_PUBLIC_ vars embedded at build time.

Do this on your computer

1. Create .env.local with DATABASE_URL and NEXTAUTH_SECRET.
2. Add .env.local to .gitignore.
3. Read a server var in a Route Handler.
4. Try NEXT_PUBLIC_ in a Client Component label.
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing Environment Variables — the page hot-reloads on save.

Remember

Server secrets stay unprefixed. NEXT_PUBLIC_ is visible in the browser. Use .env.local for local development.

Common questions