--- title: "19 — Tooling and Configuration — TypeScript, ESLint, Prettier, Env Vars" uid: tooling-config tags: ["roadmap:nextjs", "eslint", "typescript", "prettier", "environment-variables", "nextjs"] excerpt: "TypeScript types, ESLint catches, Prettier formats, env vars separate config from code — and Next.js wires all four with sensible defaults." date: 2026-08-13T03:27:59+0000 source: https://www.aveshina.my.id/en/blog/tooling-config --- 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 { 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