Tạo dự án NextJs có cái base ban đầu giúp bạn tập trung phát triển app, thay vì phải đi setup môi trường.

Quick start

yarn create next-app@latest my-app --yes
cd my-app
yarn dev

Setup lint

• Config cho Eslint. eslint.config.js

// eslint.config.js
import eslintPluginUnusedImports from 'eslint-plugin-unused-imports';
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";

export default tseslint.config(
  {
    files: ["src/**/*.{ts,tsx}"],
    extends: [
      tseslint.configs.recommended,
    ],
    plugins: {
      'unused-imports': eslintPluginUnusedImports,
      'react-hooks': reactHooks,
    },
    rules: {
      'unused-imports/no-unused-imports': 'warn',
      '@typescript-eslint/no-explicit-any': [
        'off'
      ],
      '@typescript-eslint/no-unused-vars': [
        'off'
      ],
      'react-hooks/exhaustive-deps': [
        'off'
      ],
      '@typescript-eslint/no-empty-object-type': [
        'off'
      ],
      'unused-imports/no-unused-vars': [
        'off',
        {
          vars: 'all',
          varsIgnorePattern: '^_',
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
    },
  },
);

• Bổ sung thêm lệnh cho eslint vào trong package.json để thực thi gọn gàng hơn nữa nhé

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Setup format

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 4,
  "printWidth": 150,
  "endOfLine": "auto"
}

• Thêm lệnh vào package.json

{
    "scripts": {
        "format": "prettier --write \"src/**/*.ts\"",
    }
}

Cấu hình next.config để giảm lượng ram tiêu thụ khi build app

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  experimental: {
    webpackMemoryOptimizations: true
  },
};

export default nextConfig;

Docker cho app nextjs cho môi trường production

# Dockerfile
FROM node:23-alpine3.20 AS base

WORKDIR /app

COPY package.json yarn.lock .yarnrc.yml ./

RUN corepack enable

RUN yarn install --frozen-lockfile

FROM node:23-alpine3.20 AS builder

WORKDIR /app

COPY --from=base /app/node_modules ./node_modules
COPY --from=base /app/.yarn ./.yarn
COPY . .

RUN corepack enable

RUN yarn build

EXPOSE 3000

CMD ["yarn", "start"]

// docker-compose.yml
services:

  ptts_web_service:
    container_name: ptts_web_service
    image: ptts_web_service
    restart: always
    build: .
    networks:
      card:
        ipv4_address: 172.21.0.66

Docker cho môi trường phát triển

# Dockerfile
FROM node:23-alpine3.20 AS base

WORKDIR /app

COPY package.json yarn.lock .yarnrc.yml ./

RUN corepack enable

RUN yarn install 

COPY . .

EXPOSE 3000

CMD ["yarn", "dev"]

// docker-compose.yml
services:

  ptts_web_service:
    container_name: ptts_web_service
    image: ptts_web_service
    restart: always
    build: .
    volumes:
      - ./:/app
    networks:
      card:
        ipv4_address: 172.21.0.66