Next App Boilerplate

This is a template repository used to simplify the above, as setting this up for every project adds up overtime.

Usage

npx create-next-app@latest -e https://github.com/cyrus01337/next-app-boilerplate .

yarn create next-app -e https://github.com/cyrus01337/next-app-boilerplate .

pnpx create next-app -e https://github.com/cyrus01337/next-app-boilerplate .

bunx create-next-app -e https://github.com/cyrus01337/next-app-boilerplate .

gh repo create -p cyrus01337/next-app-boilerplate --public --clone $(basename $PWD) && \
    gh repo clone $(basename $PWD) .

. is the current directory, meaning the project will be generated in the directory this command is invoked under, whereas omitting the . (path) creates a sub-directory and goes through the typical interactive installation.

There is a lack of real support for Bun at the moment due to lacking support from ESLint I believe? So this will have to be setup manually.

Inclusions

The project comes with a built-in pipeline to enforce formatting across the project, as well as a lint script (lint:formatting) that allows you to locally confirm whether the project abides by the formatting style, as defined in .prettierrc.

• ESLint - standard web development linter
• PostCSS - modern CSS transformer and framework
• TailwindCSS - simplifies CSS and offers sensible default styles
• Prettier - standard web development formatter
• TypeScript - extends JavaScript by adding types
• Husky - manages scripts that run just before commits, i.e. automate formatting, enforce type-checking

Plugins

ESLint

• eslint-config-prettier - avoid conflicts with ESLint by disabling certain rules
• create next-app additions
  • eslint-config-next
  • next/core-web-vitals - ruleset for accessibility
• @typescript-eslint/parser - TypeScript parser specifically for ESLint
• @typescript-eslint/eslint-plugin - required to lint TypeScript files

PostCSS

• create next-app additions
  • autoprefixer - allows for cross-browser compatibility in CSS by duplicating classes with all browser-specific prefixes (if supported)
  • postcss-flexbugs-fixes - applies hotfixes for common flexbox issues
  • postcss-preset-env - CSS polyfill support and modern CSS translator for backwards-compatibility
• tailwindcss - simple, concise CSS library for simplifying styles with sensible defaults

TailwindCSS

• @tailwindcss/typography - adds the prose class that makes text look good (I use this often enough to warrant it's addition)

Prettier

• @ianvs/prettier-plugin-sort-imports - auto-sorts imports (better alternative to Trivago's implementation, offers much more customisation)
• prettier-plugin-sort-json - JSON file formatting, typically for configuration files
• prettier-plugin-tailwindcss - auto-sorts Tailwind classes

Husky

• lint-staged - run pre-commit hooks only on staged files
• tsc-files - only typecheck staged files (see here)