- β‘οΈ Next.js 12
- βοΈ 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
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
To start the project locally, run:
pnpm dev
Open 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
- pnpm 7
.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.
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.
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';
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.
This project is licensed under the MIT License - see the LICENSE.md file for more information.