Nextjs Pages Starter

abhinnankit

This is my personal preferred nextjs-starter with tailwind scss and some useful helper methods and styles.

Download

About

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Installation

After cloning the repo, install all the dependencies using yarn install or npm i

Once Installation is complete, run all the node commands using ni

Run the server

Execute nr dev in any shell and goto

http://localhost:3000

Manually steps for setting up VS code

Extensions

Install the following extensions to get the best development experience in VSCode:

Paste the following in settings.json [^1]:

[^1]: Open command pallette (cmd+shift+p) Type/Paste: Preferences: Open User/Workspace Settings (JSON)

"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
"[scss]": {
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
  "source.fixAll": true,
  "source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "typescript"],
"editor.tabSize": 2,
"editor.formatOnSave": true,
"files.associations": {
  "*.tsx": "typescriptreact",
  "*.jsx": "javascriptreact",
  "*.scss": "scss",
  "*.css": "tailwindcss"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"emmet.includeLanguages": {
  "postcss": "css"
},
"editor.quickSuggestions": {
  "strings": "on"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles*", ".*Color", ".*Classes"],
"tailwindCSS.emmetCompletions": true,
"tailwindCSS.experimental.classRegex": [
  "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]",
  "@tw\\s\\*/\\s+[\"'`]([^\"'`]*)",
  ["clsx\\(([^]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
  ["cn\\(([^]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
  ["classList.(?:add|remove)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
  ["(?:twMerge|twJoin)\\(([^\\);]*)[\\);]", "[`'\"`]([^'\"`,;]*)[`'\"`]"]
],
"tailwindCSS.includeLanguages": {
  "plaintext": "html"
},
"typescript.updateImportsOnFileMove.enabled": "always",

Issues and Fixes

Fix uppercase path issues with git git config --global core.ignorecase false

Top categories