- ⚡️ Next.js 12
- ⚛️ React 17
- ⛑ TypeScript
- 📏 ESLint — Find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 📄 Commitizen — To define a standard way of committing rules
- 🚓 Commitlint — Make sure your commit messages follow the convention
- 🖌 Renovate — Keep your dependencies up to date
- 🚫 lint-staged — To run ESLint and Prettier against staged Git files
- 👷 PR Workflow — Run Type Check & Linters on all Pull Requests
- ⚙️ EditorConfig - Maintain consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the
@prefix
The best way to start with this template is using Create Next App.
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# or
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
To start the project locally, run:
yarn devOpen http://localhost:3000 with your browser to see the result.
“This starter is by far the best TypeScript starter for Next.js. Feature packed but un-opinionated at the same time!”
— Arafat Zahan
“Brilliant work!”
— Soham Dasgupta
List of websites that started off with Next.js TypeScript Starter:
- Node.js >= 12.22.0
- Yarn 1 (Classic)
.github— GitHub configuration including the CI workflow..husky— Husky configuration and hooks.public— Static assets such as robots.txt, images, and favicon.src— Application source code, including pages, components, styles.
yarn dev— Starts the application in development mode athttp://localhost:3000.yarn build— Creates an optimized production build of your application.yarn start— Starts the application in production mode.yarn type-check— Validate code using TypeScript compiler.yarn lint— Runs ESLint for all files in thesrcdirectory.yarn format— Runs Prettier for all files in thesrcdirectory.yarn commit— Run commitizen. Alternative togit commit.
TypeScript are pre-configured with custom path mappings. To import components or files, use the @ prefix.
import { Button } from '@/components/Button';
// To import images or other files from the public folder
import avatar from '@/public/avatar.png';By default, this starter uses Yarn 1 (Classic), but this choice is yours. If you'd like to switch to npm, delete the yarn.lock file, install the dependencies with npm install, and change the CI workflows, Husky Git hooks, and lint-staged steps to use npm commands.
This project is licensed under the MIT License - see the LICENSE.md file for more information.
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent