19 — Tooling and Configuration — TypeScript, ESLint, Prettier, Env Vars

The tooling stack around a project used to be something I assembled from memory. The model that clicked: TypeScript adds static typing on top of JavaScript, ESLint catches problematic patterns, Prettier formats code, and environment variables separate config from code [1][2][3][4]. Next.js wires all four with sensible defaults, so the project starts typed, linted, formatted, and configurable.

TypeScript — static typing, built in

TypeScript is a syntactic superset of JavaScript that adds static typing [1]. Next.js ships with built-in TypeScript: create-next-app installs the necessary packages and configures tsconfig.json automatically. Adding TypeScript to an existing project is as simple as renaming a file to .ts/.tsx and running next dev — Next.js installs the deps and writes the recommended config.

The payoff is the type errors caught before runtime, the editor autocomplete driven by real types, and the refactors that are actually safe. For any project of meaningful size, the cost of writing types is paid back many times over in bugs not shipped.

// types flow through everything, including server function params
export async function createPost(input: { title: string }): Promise<Post> {
  return db.post.create({ data: input });
}

ESLint — catching problems

ESLint is an open-source static analysis tool that identifies problematic patterns and style issues in JavaScript/TypeScript code [2]. Next.js provides eslint-plugin-next, bundled into the base configuration, which catches Next.js-specific issues — unoptimized images, incorrect next/link usage, missing alt text, the next/head mistakes that hurt SEO.

next lint  # runs the configured ESLint setup

The plugin turns "framework gotchas you'd discover at runtime" into "lint errors you see before you push." That shift-left is the whole value.

Prettier — formatting

Prettier is an opinionated code formatter that enforces a consistent style across the project [3]. It supports JavaScript, TypeScript, CSS, and more. The potential conflict: ESLint's formatting rules can collide with Prettier's. The fix is eslint-config-prettier, which disables ESLint's formatting rules so Prettier owns formatting and ESLint owns code-quality checks [3].

// .eslintrc — let Prettier own formatting
{
  "extends": ["next/core-web-vitals", "prettier"]
}

The division of labor worth internalizing: ESLint catches bugs and enforces conventions; Prettier formats. Don't make them fight.

Environment variables — config outside code

Environment variables are dynamic values that affect program behavior — typically configuration, API keys, and secrets that shouldn't be hardcoded [4]. Next.js has built-in support: a .env file loads variables, and the NEXT_PUBLIC_ prefix bundles a variable into the browser bundle.

# .env.local
DATABASE_URL=postgres://...        # server-only
NEXT_PUBLIC_GA_ID=G-XXXX           # exposed to the browser

// server-only — never reaches the browser
const db = connect(process.env.DATABASE_URL);

// client-safe — bundled into the browser
<Script src={`https://...?id=${process.env.NEXT_PUBLIC_GA_ID}`} />

The distinction is the security model: anything without NEXT_PUBLIC_ stays on the server and is safe to use for secrets. Anything with the prefix is inlined into client bundles and visible to anyone who inspects them — so it's only for non-secret public config.

How I use this

TypeScript is non-negotiable on any new project — create-next-app with TypeScript selected, strict mode on. ESLint with eslint-plugin-next runs locally and in CI. Prettier owns formatting via eslint-config-prettier, so the two tools don't fight. Environment variables live in .env.local for development and in the hosting provider's environment settings for production, with the NEXT_PUBLIC_ discipline kept tight: secrets never get the prefix. The combination gives a project that's typed, linted, formatted, and configurable from day one.

References

[1] Vercel, "TypeScript," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/config/typescript

[2] Vercel, "ESLint plugin," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/config/eslint

[3] Vercel, "ESLint plugin with Prettier," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/config/eslint#with-prettier

[4] Vercel, "How to use environment variables in Next.js," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/guides/environment-variables

[5] Prettier, "eslint-config-prettier," GitHub, 2024. [Online]. Available: https://github.com/prettier/eslint-config-prettier

[6] Vercel, "Configuration," Next.js Docs, 2024. [Online]. Available: https://nextjs.org/docs/app/api-reference/config