Awesome
<p align="center"> <img src="https://user-images.githubusercontent.com/26466516/141659551-d7ba5630-7200-46fe-863b-87818dae970a.png" alt="Next.js TypeScript Starter"> </p> <br /> <div align="center"><strong>Non-opinionated TypeScript starter for Next.js</strong></div> <div align="center">Highly scalable foundation with the best DX. All the tools you need to build your next project.</div> <br /> <div align="center"> <img src="https://img.shields.io/static/v1?label=PRs&message=welcome&style=flat-square&color=5e17eb&labelColor=000000" alt="PRs welcome!" /> <img alt="License" src="https://img.shields.io/github/license/jpedroschmitz/typescript-nextjs-starter?style=flat-square&color=5e17eb&labelColor=000000"> <a href="https://twitter.com/intent/follow?screen_name=jpedroschmitz"> <img src="https://img.shields.io/twitter/follow/jpedroschmitz?style=flat-square&color=5e17eb&labelColor=000000" alt="Follow @jpedroschmitz" /> </a> </div> <div align="center"> <sub>Created by <a href="https://twitter.com/jpedroschmitz">João Pedro</a> with the help of many <a href="https://github.com/jpedroschmitz/typescript-nextjs-starter/graphs/contributors">wonderful contributors</a>.</sub> </div> <br />Features
- ⚡️ Next.js 14 (App Router)
- ⚛️ React 18
- ⛑ TypeScript
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🖌 Renovate — To keep your dependencies up to date
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- 👷 PR Workflow — Run Type Check & Linters on Pull Requests
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the
@
prefix
Quick Start
The best way to start with this template is using Create Next App.
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
Development
To start the project locally, run:
pnpm dev
Open http://localhost:3000
with your browser to see the result.
Testimonials
“This starter is by far the best TypeScript starter for Next.js. Feature packed but un-opinionated at the same time!”<br> — Arafat Zahan
“I can really recommend the Next.js Typescript Starter repo as a solid foundation for your future Next.js projects.”<br> — Corfitz
“Brilliant work!”<br> — Soham Dasgupta
Showcase
List of websites that started off with Next.js TypeScript Starter:
Documentation
Requirements
- Node.js >= 20
- pnpm 9
Directory Structure
.github
— GitHub configuration including the CI workflow.<br>.husky
— Husky configuration and hooks.<br>public
— Static assets such as robots.txt, images, and favicon.<br>src
— Application source code, including pages, components, styles.
Scripts
pnpm dev
— Starts the application in development mode athttp://localhost:3000
.pnpm build
— Creates an optimized production build of your application.pnpm start
— Starts the application in production mode.pnpm type-check
— Validate code using TypeScript compiler.pnpm lint
— Runs ESLint for all files in thesrc
directory.pnpm format
— Runs Prettier for all files in thesrc
directory.
Path Mapping
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';
Switch to Yarn/npm
This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the pnpm-lock.yaml
file, install the dependencies with Yarn/npm, change the CI workflow, and Husky Git hooks to use Yarn/npm commands.
Note: If you use Yarn, make sure to follow these steps from the Husky documentation so that Git hooks do not fail with Yarn on Windows.
License
This project is licensed under the MIT License - see the LICENSE.md file for more information.