Remco's Next.js Boilerplate

Easy to use front-end boilerplate to start developing your Next.js application right away 💯

Learn More

---

Highlights

• Features all of the benefits of Next.js
• Typescript support
• Blazing fast package manager
• Lint your code with husky & lint-staged
• Normalizes default browser styles
• Automatically formats your code by using Prettier
• JavaScript Testing Framework
• Friendly errors & warnings
• Automated releases with semantic-release and Github Actions
• Includes Tailwind CSS & shadcn/ui to quickly build user-friendly interfaces
• Automatically optimizes all your SVGs

File Tree

├── .github                   # Workflows for Github Actions
├── .husky                    # Git hooks
├── app                       # Pages folder
├── __tests__                 # Test folder
│   └── __snapshots__         # Snapshot folder
│       └── snapshot.tsx.snap # The saved snapshots
│   └── index.test.tsx        # Sample test file
│   ├── components            # Components folder
│   ├── lib                   # Library folder
│   ├── svgs                  # SVG folder
│   ├── favicon.ico           # The favicon
│   ├── globals.css           # The main css file to configure globals such a tailwind
│   ├── layout.tsx            # The main layout files
│   └── page.tsx              # Sample page
├── docs                      # Documentation
│   └── CHANGELOG.md          # the changelog
│   └── ci.md                 # docs for CI
│   └── commit-convention.md  # docs for commit convention
├── public                    # Folder for static assets
├── .commitlintrc             # commitlint config (package)
├── .czrc                     # Config to commitizen
├── .editorconfig             # Config to normalize editors
├── .env.example              # Example file with required .env variables
├── .eslintrc                 # Eslint config
├── .gitignore                # Files that will be ignored by git
├── .lintstagedrc.js          # Config file for "lint-staged" (package)
├── .nvmrc                    # Compatible node version
├── .prettierignore           # Files that will be ignored by Prettier (package)
├── .prettierrc               # Prettier config (package)
├── .releaserc                # semantic-release config
├── .svgrrc                   # config for SVGR
├──  CODE_OF_CONDUCT          # the CODE OF CONDUCT
├──  jest.config.js           # Config file for jest
├──  jest.setup.js            # Used for __tests__/testing-library.js
├──  LICENSE                  # License information
├──  next-env.d.ts            # Next.js Typescript declaration file (leave unchanged)
├──  package.json             # The package.json of this project
├──  pnpm-lock.yaml           # Lock file for packages (leave unchanged)
├──  postcss.config.js        # the postcss config file
├──  README.md                # README documentation
├──  tailwind.config.ts       # the tailwind css config
└──  tsconfig.json            # Typescript config

Usage

For new projects you should be using pnpm as your package manager. It has some advantages over yarn and npm but it's main purpose is to be a fast and disk space efficient.

If you are new to pnpm you need to install it on your local machine, afterwards you can follow the instructions below.

# Install dependencies

pnpm install

# Install playwright for end-to-end tests

pnpm exec playwright install --with-deps

# Start local webserver at port 3000

pnpm dev

# Run linters

pnpm lint

# Run unit tests

pnpm test

# Run end-to-end tests

pnpm test:e2e

# Build app for production (gets output in the 'dist' directory)

pnpm build

# Start production server

pnpm start

Learn More

To learn more about Next.js and the other tools, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Typescript - Introduction to TypeScript
• pnpm - Fast, disk space efficient package manager
• Tailwind CSS - A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
• Eslint - Find and fix problems in your JavaScript code.
• Prettier - Prettier is an opinionated code formatter.
• Jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
• React Testing Library - Simple and complete testing utilities that encourage good testing practices
• Conventional Commits - A specification for adding human and machine readable meaning to commit messages
• semantic-release - Fully automated version management and package publishing

Deploy

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Documentation

• CHANGELOG - Changelog with all notable changes made to a project
• CI - Short explanation of the continuous integration process
• Commit Convention - Short introduction of the commit convention

Todo

• Write README.md
• Add UI Library e.g. Chakra UI
• Add React Testing Library
• Add automated releases
• Add more examples

License

MIT