# Nextjs Tooling

> Ecosystem optimization, deployment, and developer flow. Use when configuring Next.js build optimization, deployment settings, or developer tooling. (triggers: next.config.js, package.json, Dockerfile, turbopack, output, standalone, lint, telemetry)

- Skill: `comeonoliver/nextjs-tooling` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/nextjs-tooling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/nextjs-tooling/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/nextjs-tooling

---


# Next.js Tooling

## **Priority: P2 (MEDIUM)**

## Structure

```text
project/
├── .next/              # Build artifacts
├── next.config.js      # Advanced config
└── .eslintrc.json      # Next plugins
```

## Implementation Guidelines

- **Build Architecture**: Use **`Turbopack`** (modern) or **`Webpack`** (legacy). Enable **`--turbo`** for faster incremental development.
- **Minification**: Ensure **`output: 'standalone'`** is set in `next.config.js` for optimized **Docker** deployments. Use **`ProGuard` / `Uglify`** equivalents for asset shrinking.
- **Linting**: Mandate **`next lint`** (Next.js ESLint plugin) and **`tsc` (typecheck)** in CI/CD pipelines.
- **Asset Optimization**: Inspect size with **`@next/bundle-analyzer`**. Optimize images via **`next/image`** and remove unused dependencies.
- **Telemetry**: Opt-out via **`next telemetry disable`** if privacy is required.
- **Environment**: Use **`.env`** management in Next.js (Server only vs `NEXT_PUBLIC_*`). Validate schemas with **Zod** at runtime.
- **CI/CD**: Cache the **`.next/cache`** folder in CI for 50%+ faster build times.

## Anti-Patterns

- **No `npm run start` for dev**: Use `next dev` (or `next dev --turbo`).
- **No uninspected bundle growth**: Analyze with `@next/bundle-analyzer` before shipping.
- **No custom ESLint rules over plugin**: Use `eslint-plugin-next` for Next.js-aware linting.
- **No `console.log` in production**: Use structured loggers (Pino, Winston).

## References

- [CI/CD & Deployment Guide](references/implementation.md)