Learning Next.js - Modern Tooling & Build Automation

#Introduction

Efficient developers let machines handle repetitive tasks. Build, linting, type checking, and deployment should run automatically — consistent every time, without depending on human memory.

Episode 19 covers build tooling with Turbopack, strict TypeScript configuration, CI/CD pipelines for Next.js projects with GitHub Actions, and linting, formatting, and pre-commit hooks.

#Build Tooling with Turbopack and Next.js Defaults

#Turbopack as the Bundler

Next.js 15 uses Turbopack as the default for the development server, with production build support in the latest stable version. Turbopack is written in Rust and offers incremental updates that are far faster than older approaches. Verify the bundler is active:

npx next build --turbopack

The command npx next build --turbopack runs a production build using Turbopack. Its incremental compilation speed is clearly felt on large projects — small changes only recompile what's needed.

#Bundler Alternatives

For comparison, Vite is a popular bundler for non-Next.js frontends, also built on top of esbuild and Rollup. For React with its own framework, Vite is a strong choice. In the Next.js ecosystem, Turbopack is the official way forward — learn the general concepts of bundlers, because this skill is transferable.

#TypeScript Setup and Strict Typing

#Strict Mode

TypeScript in strict mode catches bugs that linting could never find. The create-next-app scaffold already enables strict: true in tsconfig.json — which includes noUncheckedIndexedAccess, noImplicitAny, and strictNullChecks. Recommended practices:

• Type all component props with type or interface.
• Avoid any; use unknown and narrow it with validation.
• Leverage z.infer from Zod for form and API types.
• Use satisfies to ensure an object meets a contract.

#Typing Data Models

A well-typed data model makes the whole application safer:

type Article = {
  slug: string
  title: string
  published: boolean
}

The Article type above guarantees that any function using it must provide all three fields. TypeScript is documentation that executes — always up to date with the code.

#CI/CD Pipelines for Next.js

#A Pipeline with GitHub Actions

CI/CD runs checks and deployments automatically whenever code changes. A basic pipeline for every push:

name: CI
 
on:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npx tsc --noEmit
      - run: npm run build

The pipeline above runs on every push to main: install dependencies, lint, type check, then build. If any step fails, the PR is blocked — preventing broken code from entering the main branch.

#Secrets in CI

Never put credentials directly in a workflow. Store values in GitHub Secrets and read them with the vars and secrets syntax. Production builds that need variables like DATABASE_URL read from secrets, not from committed files.

#Linting, Formatting, and Pre-commit Hooks

#Consistent Prettier and ESLint

Prettier ends formatting debates with a single configuration, while ESLint enforces quality rules. Combine them so formatting is automatic and errors are caught:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}

The configuration above makes code semicolon-free, uses single quotes, and adds trailing commas. Run npx prettier --write . before committing to format the whole codebase.

#Husky, lint-staged, and Commitlint

From episode 3, you already know husky and lint-staged. Add commitlint to enforce conventional commits:

npx lint-staged

Running npx lint-staged formats and lints only the staged files. With commitlint, commits like feat: tambah halaman blog pass, while unclear messages are rejected. This flow keeps Git history clean and machine-readable — perfect preparation for deployment in episode 20.

#Closing

Here's what to take away:

• Turbopack significantly speeds up development and builds.
• Strict TypeScript catches bugs at compile time.
• A well-typed data model guarantees the safety of the whole application.
• CI/CD with GitHub Actions automates lint, type check, and build.
• Secrets in CI are read from GitHub Secrets, not committed.
• Prettier, husky, and commitlint keep quality at every commit.

In the next episode, episode 20, we'll discuss deployment and hosting — deployment on Vercel, Netlify, AWS, and Cloudflare, comparing serverless and edge deployment, preview environments and custom domains, and build output and production readiness. Your application will go online.