Next.js Advanced Starter

Next.js Advanced Starter is an opinionated boilerplate for building Next.js applications with Tailwind CSS, TypeScript, ESLint, Prettier, and absolute imports pre-configured.

What is Next.js Advanced Starter?

Next.js Advanced Starter is a GitHub template repository that provides a minimal, well-thought-out base for building advanced Next.js powered websites. It takes a fresh GitHub repository as input via the "Use this Template" button and outputs a working Next.js application with TypeScript, Tailwind CSS, ESLint rules, Prettier formatting, and standardized absolute imports. The project is maintained by an individual developer who explicitly invites criticism and contributions through issues and pull requests.

Key Features

• Tailwind CSS — Fast design workflow with automatic purging of unused classes, resulting in smaller CSS bundle sizes.
• TypeScript — Typed JavaScript that reduces errors and is called a must-have in any web-dev project.
• Customizable ESLint config — AirBnB code guidelines combined with Prettier rules, editable in the .eslintrc.js file.
• Prettier code formatting — Code is auto-formatted on save using the prettier.config.js rules.
• Inter font — Includes the Inter open-source font, easily replaceable by editing the link tag in src/pages/_app.tsx and the font family in tailwind.config.js.
• Standardized absolute imports — Import from @components/MyComp instead of ../../components/MyComp, configured via .babelrc and tsconfig.json.
• Additional Tailwind plugins — Includes @tailwindcss/ui for enhanced spacing, colors, and shadows, and @tailwindcss/typography for automatic styling of plain HTML with the prose class.

Who is it for?

• Beginners to Next.js or React who want to start building without worrying about configuring linting, formatting, CSS purging, or import paths.
• Experienced developers who want a minimal, extendable base template they can reuse for each new project instead of copying config files.
• Teams that require a consistent starting point with Airbnb-style linting, Prettier formatting, and TypeScript from day one.

What can you do with it?

• Scaffold a new web app: Click "Use this Template" to create a new repository, clone it, and run npm run dev to get a live Next.js app at localhost:3000.
• Prototype with utility CSS: Rapidly style components using Tailwind utility classes, with purging already set up.
• Learn a modern stack: Use the template as a working example of integrating Next.js, TypeScript, Tailwind CSS, and ESLint/Prettier.

How does it work?

1. Click the "Use this Template" button on GitHub to create your own repository.
2. Clone the newly created repository to your local machine.
3. Install dependencies with npm install or yarn install, then run npm run dev or yarn dev to start the development server at http://localhost:3000.

Pros and cons

Pros:

• Zero-config setup with all tooling working out of the box.
• Clear documentation on extending the template, including changing fonts, adding import aliases, and configuring ESLint rules.
• Actively invites community feedback and pull requests.

Cons:

• Opinionated defaults (e.g., Airbnb ESLint rules) may need adjustment for teams with different coding standards.
• Includes @tailwindcss/ui, which the author notes will be removed once its features are merged into Tailwind core.

FAQ

Is Next.js Advanced Starter free?

Yes, the template is open-source and available for anyone to use by clicking "Use this Template" on GitHub. There are no paid tiers or license fees mentioned.

What dependencies are included?

The template includes Next.js, React, TypeScript, Tailwind CSS, @tailwindcss/ui, @tailwindcss/typography, ESLint with Airbnb config, Prettier, and the Inter font.

How do I change the font?

Replace the <link> to Google Fonts in src/pages/_app.tsx with your chosen font URL, then update the fontFamily.sans value in tailwind.config.js. Make sure to include font weights 400, 500, 600, 700, and 800 for Tailwind's font classes to work.

How do I add a new absolute import path?

First add an alias like @myalias in your .babelrc file pointing to the folder, then add the corresponding path mapping under compilerOptions.paths in tsconfig.json.