1️⃣ Installation

npx create-next-app@latest .
# ✔ Would you like to use TypeScript? … Yes
# ✔ Would you like to use ESLint? … Yes
# ✔ Would you like to use Tailwind CSS? … Yes
# ✔ Would you like your code inside a `src/` directory? … Yes
# ✔ Would you like to use App Router? (recommended) … Yes
# ✔ Would you like to use Turbopack for `next dev`? … Yes
# ✔ Would you like to customize the import alias (`@/*` by default)? … Yes
# ✔ What import alias would you like configured? … @/*

# 1) State Management
npm install zustand @tanstack/react-query @tanstack/react-query-devtools

# 2) Form and Validation
npm install react-hook-form zod @hookform/resolvers

# 3) API Communication
npm install axios

# 4) Asset Handling
npm install --save-dev @svgr/webpack

# 5) Code Style Linting
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
npm install --save-dev prettier-plugin-tailwindcss eslint-plugin-simple-import-sort @tanstack/eslint-plugin-query

2️⃣ File modification

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

.prettierrc

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

eslint.config.mjs

import { FlatCompat } from '@eslint/eslintrc';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends(
    'next/core-web-vitals',
    'next/typescript',
    'plugin:prettier/recommended',
    'plugin:@tanstack/eslint-plugin-query/recommended',
  ),
  {
    plugins: {
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      'simple-import-sort/imports': [
        'error',
        {
          groups: [['^\\\\u0000'], ['^node:'], ['^react', '^@?\\\\w'], ['^(@|~)/'], ['^\\\\.'], ['\\\\.s?css$']],
        },
      ],
      'simple-import-sort/exports': 'error',
    },
  },
];

export default eslintConfig;

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async rewrites() {
    return {
      beforeFiles: [{ source: '/api/:path*', destination: `${process.env.API_BASE_URL}/api/:path*` }],
    };
  },
  webpack(config) {
    config.module.rules.push({
      test: /\\.svg$/i,
      use: ['@svgr/webpack'],
    });
    return config;
  },
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.ts',
      },
    },
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: process.env.IMAGE_DOMAIN!,
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

tsconfig.json

...
"baseUrl": ".",
"paths": {
  "@/public/*": ["public/*"],
  "@/app/*": ["src/app/*"],
  "@/components/*": ["src/components/*"],
  "@/hooks/*": ["src/hooks/*"],
  "@/lib/*": ["src/lib/*"],
  "@/services/*": ["src/services/*"],
  "@/styles/*": ["src/styles/*"],
  "@/types/*": ["src/types/*"]
}
...

3️⃣ Git Convention

Commit Message Convention

Tag name Description
feat Add new features
fix Resolve bugs
design Update UI styles (e.g. CSS, layout)
!BERAKING CHANGE Introduce breaking changes to APIs
!HOTFIX Apply critical bug fixes urgently
style Make non-functional changes (e.g. formatting, missing semicolons)
refactor Refactor code without changing external behavior
comment Add or update code comments only
docs Update documentation
test Add or update tests without modifying production code
chore Perform maintenance tasks (e.g. build scripts, dependency updates) with no impact on production code
rename Rename or relocate files/directories only
remove Delete files only 
feat: Summarize changes in around 50 characters or less

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of the commit and the rest of the text as the body. The
blank line separating the summary from the body is critical (unless
you omit the body entirely); various tools like `log`, `shortlog`
and `rebase` can get confused if you run the two together.

Explain the problem that this commit is solving. Focus on why you
are making this change as opposed to how (the code explains that).
Are there side effects or other unintuitive consequences of this
change? Here's the place to explain them.

Further paragraphs come after blank lines.

- Bullet points are okay, too

- Typically a hyphen or asterisk is used for the bullet, preceded
by a single space, with blank lines in between, but conventions
vary here

If you use an issue tracker, put references to them at the bottom,
like this:

Resolves: #123
See also: #456, #789

Issue Tracking