TypeScript, Environment Variables & src Directory

TypeScript setup in Next.js

create-next-app can enable TypeScript automatically. Next adds a tsconfig.json and lets you use .ts and .tsx files right away.

If you started in JavaScript, add a tsconfig.json and rename files gradually — Next guides you when types are missing.

Real-life example: TypeScript is spell-check for your code — it underlines mistakes before you publish the essay (deploy).

type CourseCardProps = {
  title: string;
  lessons: number;
};

export function CourseCard({ title, lessons }: CourseCardProps) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{lessons} lessons on Rishtaara</p>
    </article>
  );
}

export default function Page() {
  return <CourseCard title="Next.js Basics" lessons={10} />;
}

Environment variables — .env.local and NEXT_PUBLIC_

Put secrets and config in .env.local (do not commit this file). Restart the dev server after changing env files.

Variables available in the browser must be prefixed with NEXT_PUBLIC_. Server-only variables omit that prefix and stay on the server.

Real-life example: .env.local is a locked diary in your desk. NEXT_PUBLIC_ notes are posters on the classroom wall — anyone in the browser can read them.

# Server-only — never exposed to the browser
DATABASE_URL=postgres://user:pass@localhost:5432/rishtaara
API_SECRET=super-secret-value

# Exposed to client bundles — only put non-secret config here
NEXT_PUBLIC_APP_NAME=Rishtaara
NEXT_PUBLIC_API_BASE=https://api.example.com

// Server Component or Route Handler — OK for secrets
const dbUrl = process.env.DATABASE_URL;

// Client or shared code — only NEXT_PUBLIC_ values
const appName = process.env.NEXT_PUBLIC_APP_NAME;

export default function EnvDemo() {
  return <p>App: {process.env.NEXT_PUBLIC_APP_NAME}</p>;
}

Security of environment variables

Anything with NEXT_PUBLIC_ is visible in the client JavaScript bundle. Never put API keys, database passwords, or private tokens there.

Use server-only env vars in Server Components, Server Actions, and Route Handlers. Add .env* secrets to .gitignore.

Real-life example: Putting a secret in NEXT_PUBLIC_ is writing your ATM PIN on a sticker on your laptop lid — everyone who opens the lid can see it.

• Commit .env.example with empty keys — not real values
• Keep .env.local out of git
• Rotate keys if you ever commit a secret by mistake
• Remember: modern Next.js may use proxy.ts as the evolved middleware entry — keep auth checks and secrets on the server side

Using the src/ directory

The src/ directory keeps application code together. Move app/, components/, and lib/ under src/ and update imports if needed — public/ and config files usually stay at the project root.

create-next-app --src-dir does this for you. Either layout is valid; teams pick one for consistency.

Real-life example: src/ is one labeled suitcase for clothes. Root-level config files are your passport and tickets kept in a separate pouch for quick checks at the airport.

// tsconfig.json (paths section)
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// Then import like:
// import { CourseCard } from "@/components/CourseCard";