Next.js Scaffolding

Create Next.js App

pnpx create-next-app@latest
 
What is your project named?  my-app
Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS?  Yes
Would you like to use `src/` directory?  Yes
Would you like to use App Router? (recommended)  Yes
Would you like to customize the default import alias (@/*)?  No

Set Up Tailwind

pnpm install -D tailwindcss postcss autoprefixer
pnpx tailwindcss init -p

Edit tailwind.config.js

import { fontFamily } from "tailwindcss/defaultTheme"
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  future: {
    hoverOnlyWhenSupported: true,
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
        mono: ['var(--font-mono)', ...fontFamily.mono],
      },
    }
  }
}

Set Up Linting with Biome

pnpm i -D --save-dev @biomejs/biome

Create/edit biome.json

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true,
		}
	}
}

Set Up Formatting with Prettier

While Biome does have its own formatting system, I found it to be pretty buggy in its current state. So I'm still using Prettier until it becomes more stable.

pnpm i -D --save-dev prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

Create .prettierrc

{
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5",
 
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
 
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ]
}

Set Up Pre-Commit Scripts with Husky

pnpm i -D husky
pnpx husky init

Add to .husky/precommit

pnpm run tscheck
pnpm run lint
pnpm run format

Add Scripts to `package.json`

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "biome lint --apply --no-errors-on-unmatched --files-ignore-unknown=true ./src",
    "format": "prettier --write ./src",
    "tscheck":"tsc",
    "prepare": "husky"
  },

Disable Build Checks in `next.config.js`

eslint: {
    ignoreDuringBuilds: true,
},
typescript: {
    ignoreBuildErrors: true,
},