A boilerplate for creating new projects with Next.js, TypeScript, Tailwind CSS, ESLint, Prettier, Jest, and React Testing Library. Bootstrapped with create-next-app.

Execute create-next-app with npm or Yarn to bootstrap the starter kit:

npx create-next-app --example https://github.com/apideck-io/next-starter-kit
# or
yarn create next-app --example https://github.com/apideck-io/next-starter-kit

It will create a new directory inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

 my-app
 ┣ __tests__
 ┃ ┣ components
 ┃ ┃ ┣ __snapshots__
 ┃ ┃ ┗ layout.test.tsx
 ┃ ┗ pages
 ┃ ┃ ┣ __snapshots__
 ┃ ┃ ┗ index.test.tsx
 ┣ public
 ┃ ┣ fonts
 ┃ ┃ ┣ basier-circle
 ┃ ┣ img
 ┃ ┃ ┣ logo.png
 ┃ ┃ ┗ screenshot.jpg
 ┣ src
 ┃ ┣ components
 ┃ ┃ ┗ Layout.tsx
 ┃ ┣ pages
 ┃ ┃ ┣ _app.tsx
 ┃ ┃ ┗ index.tsx
 ┃ ┗ styles
 ┃ ┃ ┗ tailwind.css
 ┣ .babelrc
 ┣ .eslintrc.json
 ┣ .gitignore
 ┣ .prettierrc
 ┣ README.md
 ┣ jest.config.js
 ┣ next-env.d.ts
 ┣ package.json
 ┣ postcss.config.js
 ┣ tailwind.config.js
 ┣ tsconfig.json
 ┗ yarn.lock

Once the installation is done, you can open your project folder:

cd next-starter-kit

Inside the newly created project, you can run some commands:

Runs next dev which starts the app in development mode.
Open http://localhost:3000 to view it in the browser.

Runs next build which builds the application for production usage

Runs next start which starts a Next.js production server

Runs the eslint command for all files with the js, ts, jsx, and tsx extensions. See the .eslint.json file for all configuration settings.

Runs the eslint command with the --fix flag which tries to automatically fix linting problems.

Runs the eslint command with the --cache flag which only checks the changed files.

Runs Prettier which formats all files inside the src directory based on the configuration set inside the .prettierrc file.

Runs the tsc command to compile the project and check if it has type errors.

Runs the jest command which runs all tests

Runs the jest command with --watch flag which runs all tests in watch mode

Runs the jest command with --coverage flag which indicates that test coverage information should be collected and reported in the output.

This project uses husky and lint-staged to run linters against staged git files on commit.

Before each commit we run eslint and prettier on all staged files.

Before each push to the repository we run jest to check if all tests are passing.

To learn more, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API
• Learn Next.js - an interactive Next.js tutorial
• TypeScript - learn about TypeScript
• Tailwind CSS - learn about the utility-first CSS framework Tailwind
• Jest - learn about Jest, the JavaScript Testing Framework
• React Testing Library - learn about testing React components with React Testing Library
• ESLint - learn about analyzing code with ESLint
• Prettier - learn about formatting code with Prettier
• Prettier Extension - a Prettier extension for Visual Studio Code