It’s time to setup the frontend and we would like to choose Next.js as the base framework. Next.js is based on React and provides server side rendering out of the box, check it out at https://nextjs.org/docs/getting-started
Init Next.js project
Installation
Please also check official doc where our code is based on and will interact with: https://nextjs.org/docs/basic-features/eslint
Install dev dependencies (plugins for eslint, prettier etc.)
Config files
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
tsconfigRootDir: __dirname,
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['@typescript-eslint', 'prettier', 'import', 'unused-imports'],
extends: [
'airbnb-base',
'airbnb-typescript/base',
'plugin:@typescript-eslint/recommended',
'prettier',
'next',
'plugin:prettier/recommended',
'next/core-web-vitals',
'plugin:@next/next/recommended',
],
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'no-unused-vars': 0,
'@typescript-eslint/no-unused-vars': 0,
'unused-imports/no-unused-imports': 1,
'unused-imports/no-unused-vars': [
'error',
{
vars: 'all',
args: 'none',
ignoreRestSiblings: true,
},
],
'import/order': [
'error',
{
alphabetize: { order: 'asc', caseInsensitive: false },
'newlines-between': 'always-and-inside-groups',
warnOnUnassignedImports: true,
},
],
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
'**/*.test.{ts,js}',
'**/*.spec.{ts,js}',
'./test/**.{ts,js}',
'./scripts/**/*.{ts,js}',
],
},
],
},
};
Husky and pre commit hook
In previous section we installed husky and we need to init it.
Then
This adds a git pre-commit hook and it will execute lint-staged(run eslint, prettier etc.) for staged files every time right before commit.