DEV Community

Cover image for Start New Next.js Project Notes
Vladimir Vovk
Vladimir Vovk

Posted on • Updated on

Start New Next.js Project Notes

#nextjs #typescript #eslint #husky

Please read the Getting Started guide, it is really good.

Create a new app

Run yarn create next-app and follow the instructions.

Move code to src folder

I like to keep all source code in one folder. Next.js supports src folder by default. Create src folder and move pages and styles there.

Add Typescript

Next.js provides an integrated TypeScript experience out of the box.

Create TypeScript config file:

touch tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Next.js will automatically configure this file with default values.

Install dependencies:

yarn add --dev typescript @types/react @types/node
Enter fullscreen mode Exit fullscreen mode

Run dev server with yarn dev. Next.js will generate tsconfig.json file for us.

Change strict inside compilerOptions to true if you want the real TypeScript experience. This option will prevent you from not specifying types and from using any.

Add absolute imports

Add baseUrl parameter to the tsconfig.json config compilerOptions:

{
  "compilerOptions": {
    ...
    "baseUrl": "."
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Restart dev server with yarn dev. Now we should be able to import with an absolute path from the project's root.

import 'src/styles/globals.css'
Enter fullscreen mode Exit fullscreen mode

Add ESLint 

yarn add --dev eslint @typescript-eslint/parser  @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
Enter fullscreen mode Exit fullscreen mode
  • eslint is the main ESLint package
  • @typescript-eslint/parser will allow ESLint to parse TypeScript files
  • @typescript-eslint/eslint-plugin will add TypeScript specific lint rules
  • eslint-plugin-react will add React specific lint rules
  • eslint-plugin-react-hooks will add React Hooks rules
  • eslint-plugin-jsx-a11y will add accessibility related rules

Create a .eslintrc.js config file:

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: { ecmaVersion: 2020 },
  ignorePatterns: ['node_modules/*', '.next/*', '.out/*'],
  extends: ['eslint:recommended'],
  overrides: [
    // This configuration will apply only to TypeScript files
    {
      files: ['**/*.ts', '**/*.tsx'],
      parser: '@typescript-eslint/parser',
      settings: { react: { version: 'detect' } },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:jsx-a11y/recommended',
      ],
      rules: {
        'react/prop-types': 'off',

        // No need to import React when using Next.js
        'react/react-in-jsx-scope': 'off',

        // This rule is not compatible with Next.js's <Link /> components
        'jsx-a11y/anchor-is-valid': 'off',

        // Why would you want unused vars?
        '@typescript-eslint/no-unused-vars': ['error'],

        // I suggest this setting for requiring return types on functions only where useful
        '@typescript-eslint/explicit-function-return-type': [
          'warn',
          {
            allowExpressions: true,
            allowConciseArrowFunctionExpressionsStartingWithVoid: true,
          }
        ]
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Add Prettier 

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Create a .prettierrc.js config file:

module.exports = {
  semi: false,
  trailingComma: 'none',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
}
Enter fullscreen mode Exit fullscreen mode

Add prettier to ESLint config:

module.exports = {
  // ...
  overrides: [
    {
      // ...
      extends: [
        // ...
        'plugin:prettier/recommended', // Prettier plugin
      ],
      rules: {
        // ...
        'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Includes .prettierrc.js rules
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

Add Husky

Add lint script to package.json:

{
  "scripts": {
    ...
    "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --fix"
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

Add lint-staged config to package.json:

  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "yarn lint"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

Install Husky and Lint-staged:

yarn add husky lint-staged -D
Enter fullscreen mode Exit fullscreen mode

Add Husky pre-commit hook:

yarn husky install
yarn husky add .husky/pre-commit "yarn lint-staged"
Enter fullscreen mode Exit fullscreen mode

Start development server yarn dev and enjoy coding! 🎉

P.S. Please checkout the repo if you stuck. 🙌🏻

Credits

Photo by Gia Oris on Unsplash

Top comments (0)

Read next

drprime01 profile image

Create a Simple Authentication System for your Next Application with Clerk

DrPrime01 -

talhaahsan profile image

How TypeScript Makes JavaScript More Reliable in Large-Scale Projects.

Talha Ahsan -

paripsky profile image

Building a Meta Tags Scraping API in Under 40 Lines of Code

paripsky -

mukhilpadmanabhan profile image

Magic of Next.js: Why It's a Game-Changer for Developers

Mukhil Padmanabhan -