Setting Up Next.js like a Senior Developer

Project Setup for Next.js Blog

Overview

This project is a Next.js application configured with TypeScript, ESLint, Tailwind CSS, Turbopack, and several other tools for a modern development workflow. The setup includes a design system using shadcn, linting and formatting tools, and git hooks for commit message validation and code formatting.

Technologies and Packages Used

• Next.js: A React framework for server-side rendered applications.
• TypeScript: A typed superset of JavaScript for type safety and better developer experience.
• ESLint: A tool for identifying and fixing problems in JavaScript code.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Turbopack: A new bundler for faster builds in Next.js.
• shadcn: A design system component library.
• Commitlint: A tool for ensuring commit messages follow a conventional format.
• Lint-staged: A tool for running linters on staged files in git.
• Prettier: An opinionated code formatter.
• Simple Git Hooks: A tool for managing git hooks.
• Sort Package JSON: A tool for sorting the package.json file.

Resources and Templates

• Awesome Templates
• Next.js Pro Template
• Next.js Drizzle

Step by Step Copy Paste Guide

1. Switch to an Empty Directory and Create a New Next.js App

npx create-next-app@latest --typescript --eslint --tailwind --src-dir --app --turbopack --import-alias "@/*" .

• Initializes a new Next.js project with TypeScript, ESLint, Tailwind CSS, a src directory, the new app directory structure, Turbopack for faster builds, and an import alias for cleaner imports.

2. Initialize shadcn for Design System Components

npx shadcn@latest init -d <<EOF

EOF
npx shadcn@latest add -a <<EOF

EOF

• Sets up shadcn, a design system component library, to maintain a consistent design language across the application.

3. Upgrade Tailwind CSS

npx @tailwindcss/upgrade@latest --force

• Upgrades Tailwind CSS to the latest version to ensure you are using the most recent features and fixes.

4. Add Development Dependencies

npm install -D @commitlint/cli @commitlint/config-conventional lint-staged prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss simple-git-hooks sort-package-json

• Installs development dependencies to help maintain code quality, formatting, and enforcing commit message standards.

5. Create Configuration Files

• .lintstagedrc

cat <<EOF >.lintstagedrc
{
  "*": ["prettier --write --ignore-unknown"],
  "package.json": ["sort-package-json"]
}
EOF

• Configures lint-staged to format all files with Prettier and sort package.json during pre-commit.

• .prettierrc

cat <<EOF >.prettierrc
{
  "semi": false,
  "plugins": [
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ]
}
EOF

• Configures Prettier to avoid semicolons and use plugins for organizing imports and formatting Tailwind CSS classes.

• .commitlintrc

cat <<EOF >.commitlintrc
{
  "extends": ["@commitlint/config-conventional"]
}
EOF

• Configures Commitlint to ensure commit messages follow the conventional format.

6. Add Scripts to package.json

npx json -I -f package.json -e 'this.scripts.prepare="if [ -z \"$VERCEL_ENV\" ]; then simple-git-hooks; fi"'
npx json -I -f package.json -e 'this["simple-git-hooks"]={"pre-commit":"npx lint-staged --verbose","commit-msg":"npx commitlint --edit $1"}'

• Adds a prepare script to set up git hooks with Simple Git Hooks unless in Vercel environment, and configures Simple Git Hooks to run lint-staged before commits and commitlint on commit messages.

7. Sort package.json File

npx sort-package-json

• Sorts the package.json file to maintain a consistent order of fields.

8. Format All Files with Prettier

npx prettier --write --ignore-unknown *

• Formats all files in the project using Prettier to ensure consistent code style.

Conclusion

This setup ensures a modern development workflow with TypeScript, ESLint, Tailwind CSS, and several other tools to maintain code quality and consistency. The integration of shadcn provides a design system component library, while lint-staged and simple-git-hooks enforce code formatting and commit message standards.

All in one copy pastable script, don't forget to switch to an empty directory before running this.

npx create-next-app@latest --typescript --eslint --tailwind --src-dir --app --turbopack --import-alias "@/*" .
npx shadcn@latest init -d <<EOF

EOF
npx shadcn@latest add -a <<EOF

EOF
npx @tailwindcss/upgrade@latest --force
npm install -D @commitlint/cli @commitlint/config-conventional lint-staged prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss simple-git-hooks sort-package-json
cat <<EOF >.lintstagedrc
{
  "*": ["prettier --write --ignore-unknown"],
  "package.json": ["sort-package-json"]
}
EOF
cat <<EOF >.prettierrc
{
  "semi": false,
  "plugins": [
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ]
}
EOF
cat <<EOF >.commitlintrc
{
  "extends": ["@commitlint/config-conventional"]
}
EOF
npx json -I -f package.json -e 'this.scripts.prepare="if [ -z \"$VERCEL_ENV\" ]; then simple-git-hooks; fi"'
npx json -I -f package.json -e 'this["simple-git-hooks"]={"pre-commit":"npx lint-staged --verbose","commit-msg":"npx commitlint --edit $1"}'
npx sort-package-json
npx prettier --write --ignore-unknown *