Starter for Next.js applications written in TypeScript

A basic Starter for Next.js + TypeScript development with setup for PWA, Jest, Storybook, Eslint, Styled-components and more.

---

👌 The follwing is setup out of the box:

• Support to PWA using next-pwa
• UI components documentation with Storybook.
• Styles via Styled Components
• Consistent coding styles using EditorConfig
• Linting via eslint, typescript-eslint and prettier
• Testing via Jest and React Testing Library
• Preventing bad git commit with Husky and lint-staged
• Consistency code generator with Plop

Check all the detailed functionalities in this article.

🚀 Getting Started

Assuming Node.js is installed, run the following commands to install the project:

With yarn create next-app:

$ yarn create next-app -e https://github.com/diogorodrigues/nextjs-typescript-starter your-project-name

or

With git clone:

$ git clone https://github.com/diogorodrigues/nextjs-typescript-starter.git your-project-name

cd your-project-name

rm -rf .git
yarn install
yarn dev

Commands

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

All commands

• dev: runs your application on localhost:3000
• build: creates the production build version
• start: starts a simple server with the build production code
• lint: runs the linter in all components and pages
• test: runs jest to test all components and pages
• test:watch: runs jest in watch mode
• storybook: runs storybook on localhost:6006
• build-storybook: create the build version of storybook
• generate component-name: create component files

Learn More

To learn more about Next.js, 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.