Next Starter

Tech Stack:

Next.js | TypeScript | ESLint | Prettier | Tailwind CSS | pnpm

How to use it

To use this starter, run the following command to create your Next.js app:

pnpm create next-app my-app -e https://github.com/heloineto/next-starter

Note:

To have an up-to-date project, verify when this template was last updated. If you believe it was too long ago, consider recreating it following (and changing if necessary) the steps below.

How to re-create it

1. You can create a TypeScript project with create-next-app using the --ts, --typescript flag. Instructions here.

   pnpm create next-app --ts next-starter

2. Install Tailwind. Instructions here.

   Remember to use pnpm instead of npm

   Add automatic tailwind class sorting with prettier. Instructions here

   pnpm i -D prettier prettier-plugin-tailwindcss

3. Configure Prettier. See configuration.

   Install eslint-config-prettier. See more.

   pnpm i -D eslint-config-prettier

   Notes:

   Trailing commas improve developer experience. See why

4. Configure ESLint. See configuration.

   Install ESLint Plugin TypeScript. Instructions here.

   pnpm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser`

5. Add Husky and lint-staged

   Install husky. Instructions here.

   Add lint-staged. Instructions here.

6. Add vscode settings & extensions

   // .vscode/settings.json
   
   {
   	"editor.codeActionsOnSave": [
   		"source.addMissingImports",
   		"source.fixAll",
   		"source.organizeImports"
   	],
   	"editor.defaultFormatter": "esbenp.prettier-vscode",
   	"editor.foldingImportsByDefault": true,
   	"editor.formatOnSave": true
   }

   // .vscode/extensions.json
   
   {
   	"recommendations": [
   		"svelte.svelte-vscode",
   		"bradlc.vscode-tailwindcss",
   		"dbaeumer.vscode-eslint",
   		"esbenp.prettier-vscode"
   	]
   }

7. Add common utils

   src/
   ├ lib/
   ├ utils/
   │ └ classes.ts
   

indexes-api