presetter-preset-next

v8.2.0

Published

24 days ago

An opinionated presetter preset for a Next JS project

Downloads

344

0High
0Medium
0Low

alvis

presetter preset

🚀 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.