This is a complete Next.js project template using TypeScript, linters like ESlint and Prettier and the app router. It allows you to skip the tedious details for the following:
- Adding and configuring TypeScript support.
- Enabling TypeScript linting.
- Automatic linting and checks for Typescript errors on commit.
Tip
Note that I am using npm for the following steps but you can do the same with other package manager like yarn
Clone this repo into the directory you want to use for your new project, delete the Git history, and then reinit as a fresh Git repo:
$ git clone https://github.com/Sterbenfr/next-typescript-template.git <your project directory>
$ cd <your project directory>
$ rm -rf ./.git/
$ git init
$ npm install
$ npx husky installImportant
You'll also need to install the Prettier - code formatter , Prettier ESLint and ESLint extensions in your VSCode
Some additional steps need to be performed for a new project. Specifically, you'll need to:
- Create your project on GitHub (do not add a README, .gitignore, or license).
- Add the initial files to the repo:
$ git add .
$ git remote add origin [email protected]:<your GitHub username>/<your project name>
$ git push -u origin masterI will also recommend my keybinds to be able to lint without saving and I'll slip in some that I find usefull :
Note
To use these keybinds you need to open the command palette (ctrl + shift + p by default) and search Preferences : Open Keyboard Shortcuts (JSON) and Do Not Forget to delete the shortcuts.json file after
Recommended Keyboard Shortcuts
You can then run the server by using :
npm run devThen open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page
auto-updates as you edit the file.
Official Next.js TypeScript documentation: Next.JS Typescipt Doc