Name	Name	Last commit message	Last commit date
parent directory ..
spec	spec
src	src
templates	templates
CHANGELOG.md	CHANGELOG.md
README.md	README.md
package.json	package.json

🚀 presetter-preset-next

Combines preset-esm, preset-strict, and preset-react with Next.js-optimized configurations

• Usage • Configuration • Comparison • FAQ •

This is a configuration template that works with Presetter, the configuration management tool.

⚡ TL;DR / Quick Start

# Install Next.js preset
npm i -D presetter presetter-preset-next

# Create presetter.config.ts
echo "export { default } from 'presetter-preset-next';" > presetter.config.ts

# Bootstrap your project
npx presetter bootstrap

Your Next.js project now has all the benefits from preset-esm, preset-strict, and preset-react, plus Next.js-optimized configurations!

✨ What This Preset Does

Convenience wrapper for Next.js development

Setting up a Next.js project with proper tooling requires configuring multiple presets and tools. This preset simplifies that process by combining several presets into one convenient package.

The main benefit: One preset instead of three, with Next.js tweaks included.

What you get

What You Need	Without This Preset	With preset-next
ES Modules Support	Manually include preset-esm	✅ Included automatically
Strict Quality Rules	Manually include preset-strict	✅ Included automatically
React Development	Manually include preset-react	✅ Included automatically
Next.js ESLint Rules	Configure @next/eslint-plugin-next	✅ Pre-configured
TypeScript for Next.js	Adjust TypeScript settings	✅ Optimized settings included
Combined Benefits	Manage multiple preset dependencies	✅ Single preset dependency

Core functionality

presetter-preset-next is a convenience configuration wrapper that combines multiple presets with Next.js-specific tweaks.

When used with Presetter (the configuration management tool), this preset combines preset-esm, preset-strict, and preset-react and adds Next.js-specific configuration adjustments.

What it actually provides:

📦 Combined Presets: All benefits from preset-esm + preset-strict + preset-react
📝 Next.js ESLint Rules: Adds @next/eslint-plugin-next configuration
🔧 TypeScript Tweaks: Minor adjustments for Next.js compatibility
📚 Simplified Setup: One dependency instead of managing three presets

🔍 Understanding Presetter vs This Preset

Important distinction:

Component	Role	What it does
Presetter	Configuration management tool	CLI that processes presets, generates config files, executes scripts
preset-esm	Base ES modules template	Provides modern JavaScript/TypeScript with ES modules
preset-strict	Quality enforcement extension	Adds strict linting, type checking, quality rules
preset-react	React development extension	Adds React 18+, JSX/TSX, TailwindCSS, Storybook
presetter-preset-next	Next.js complete template	Combines all above + Next.js-specific optimizations

Think of it like:

Presetter = The engine that builds houses
ESM preset = The modern foundation
Strict preset = The building codes and inspections
React preset = The family-friendly features
This preset = The complete smart home with everything integrated

This preset combines multiple presets to create the ultimate Next.js development experience. For advanced usage, customization, and troubleshooting, visit the main Presetter documentation.

🚀 Usage

🟢 Basic Next.js Setup

Step 1: Install Preset

// presetter.config.ts
export { default } from 'presetter-preset-next';

Step 2: Install Next.js Dependencies

npm i next react react-dom
npm i -D presetter presetter-preset-next

Step 3: Bootstrap & Develop

npx presetter bootstrap

That's it! Your Next.js project is now configured with:

Everything from preset-esm (ES modules, modern JavaScript/TypeScript)
Everything from preset-strict (quality rules, strict linting)
Everything from preset-react (React 18+, TailwindCSS 4, Storybook)
Plus: @next/eslint-plugin-next rules for Next.js-specific linting
Plus: Minor TypeScript configuration tweaks for Next.js

🧑‍🔬 Advanced Usage: Custom Next.js Configuration

// presetter.config.ts
import preset from 'presetter-preset-next';

export default preset.extend({
  variables: {
    source: 'app', // use Next.js app directory
    types: 'types', // custom types directory
  },
  override: {
    assets: {
      'tsconfig.json': {
        compilerOptions: {
          // additional Next.js optimizations
          paths: {
            '@/*': ['./src/components*'],
          },
        },
      },
      'eslint.config.ts': {
        rules: {
          // custom Next.js rules
          '@next/next/no-img-element': 'error',
          '@next/next/no-sync-scripts': 'error',
        },
      },
    },
  },
});

Need more customization? Check the main Presetter documentation for complete customization guides.

📖 API Reference

Core Functionality

This preset combines multiple presets and adds Next.js-specific configurations:

What's Added	Source	Purpose
ES Modules	preset-esm	Modern JavaScript/TypeScript support
Quality Rules	preset-strict	Strict linting and quality enforcement
React Stack	preset-react	React 18+, TailwindCSS 4, Storybook
Next.js ESLint	This preset	@next/eslint-plugin-next rules
TypeScript Tweaks	This preset	Minor adjustments for Next.js compatibility

TypeScript Configuration

Next.js Optimizations

// Generated tsconfig.json includes:
{
  "compilerOptions": {
    "jsx": "preserve",              // next.js handles JSX
    "moduleResolution": "bundler",  // next.js module resolution
    "allowJs": true,                // javaScript support
    "plugins": [{ "name": "next" }] // next.js language service
  }
}

ESLint Integration

// full Next.js ESLint support
import * as next from '@next/eslint-plugin-next';
import storybook from 'eslint-plugin-storybook';

export default [
  ...baseConfig,
  next.flatConfig.recommended,
  ...storybook.configs['flat/recommended'],
];

Generated Files

File	Purpose
`eslint.config.ts`	ESLint with Next.js + Storybook rules
`tsconfig.json`	TypeScript optimized for Next.js
`tsconfig.build.json`	Build configuration
`postcss.config.json`	PostCSS with TailwindCSS
`next-env.d.ts`	Next.js type definitions
`.gitignore`	Git ignore patterns
`.npmignore`	NPM ignore patterns

🔧 Configuration Details

Complete Preset Stack

preset-next = ESM + Strict + React + Next.js configuration tweaks

You get everything from:

preset-esm: ES modules, modern JavaScript
preset-strict: Production-grade quality rules
preset-react: React 18+, TailwindCSS 4, web tooling

Plus Next.js Specific Adjustments

✅ Next.js ESLint Plugin: Adds @next/eslint-plugin-next rules
✅ TypeScript Configuration: Minor tweaks for Next.js compatibility
✅ Combined Dependencies: Single preset instead of three

Included Dependencies

Automatically configured tools:

@next/eslint-plugin-next - Next.js specific linting
@storybook/nextjs-vite - Storybook Next.js integration
sharp - Image optimization
postcss-preset-env - Modern CSS features
All tools from ESM, Strict, and React presets

🏎️ Benefits

What You Get	Manual Setup	With preset-next
Setup Time	Configure 3 presets	✅ 1 preset
Dependency Count	3 preset dependencies	✅ 1 preset dependency
Next.js ESLint	Manual configuration	✅ Pre-configured
TypeScript Config	Manual adjustments	✅ Pre-adjusted
Combined Benefits	Manage separately	✅ All-in-one

🌐 Compatibility

Environment	Support
Next.js	≥ 15 (with App Router)
React	≥ 15
Node.js	≥ 20
TypeScript	≥ 5.0

Includes All From

presetter-preset-esm - ES modules support
presetter-preset-strict - Quality enforcement
presetter-preset-react - React + web development

🆚 Comparison

Feature	Using Individual Presets	With preset-next
Dependencies	3 preset packages	✅ 1 preset package
Configuration	Manage 3 presets	✅ Single configuration
Next.js ESLint	Manual add & configure	✅ @next/eslint-plugin-next ready
TypeScript Tweaks	Manual adjustments	✅ Pre-adjusted for Next.js
Preset Benefits	All included separately	✅ All combined in one

When to Use

✅ Use preset-next when:

Building Next.js applications
Want the benefits of preset-esm + preset-strict + preset-react
Don't want to manage three separate preset dependencies
Want Next.js-specific ESLint rules pre-configured
Prefer a single preset for simplicity

❌ Consider alternatives when:

Building non-Next.js React apps (use preset-react directly)
Want more granular control over individual presets
Only need one of the included presets (e.g., just ESM or just React)
Have specific preset version requirements

🛠️ Troubleshooting

General issues? See the main troubleshooting guide.

Next.js Specific Issues

Issue	Symptoms	Solution
TypeScript paths not working	Module resolution errors	Next.js handles paths, check tsconfig
Server Component types	Async component errors	Ensure Next.js TypeScript plugin is active
ESLint Next.js rules	Rules not applying	Check @next/eslint-plugin-next is installed
Storybook loading	Components not rendering	Verify @storybook/nextjs-vite configuration

❓ FAQ

General questions? Check the main FAQ.

Why combine ESM + Strict + React?

This preset provides convenience by bundling commonly used presets together:

ESM: Modern JavaScript/TypeScript foundation
Strict: Quality rules and strict linting
React: React development tools and configurations
Plus: Next.js-specific ESLint rules and TypeScript tweaks

Do I need to install Next.js separately?

Yes, Next.js is a peer dependency:

npm i next react react-dom
npm i -D presetter presetter-preset-next

What's the main benefit?

Simplicity. Instead of:

// presetter.config.ts
import presetESM from 'presetter-preset-esm';
import presetStrict from 'presetter-preset-strict';
import presetReact from 'presetter-preset-react';
// Plus manual Next.js configurations...

You just need:

// presetter.config.ts
export { default } from 'presetter-preset-next';

Does it do anything special for Next.js?

Yes, it adds:

@next/eslint-plugin-next ESLint rules
Minor TypeScript configuration adjustments for Next.js
All the benefits from the three included presets

🤝 Contributing

We'd love your ideas and contributions! Submit issues or suggestions via GitHub Issues. See the Contribution Guide for more details.

FilesExpand file tree

preset-next

Directory actions

More options