Next.jsのサーバーコンポーネントの実装練習(1)

### 開発環境構築
**💡compose.yamlの作成**
```Dockerfile
version: '3.8'

services:
  next:
    build:
      context: ./next
      container_name: next
    working_dir: /app
    ports:
      - "3000:3000"
    env_file:
      - .env
    volumes:
      - ./next:/app
      - /app/node_modules
    depends_on:
      - db
    networks:
      - app-network

  db:
    image: postgres:15
    environment:
      - POSTGRES_USER=${POSTGRES_USER}
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
      - POSTGRES_DB=${POSTGRES_DB}
    volumes:
      - postgres-data:/var/lib/postgresql/data
    ports:
      - "5432:5432"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  postgres-data:
```

**💡Next.jsのアプリケーションを作る : ルートディレクトリ名 = next**
```
npx create-next-app@latest next
```
ちなみに、各種質問には以下のように回答。
```
Need to install the following packages:
create-next-app@14.2.13
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
```
**💡Dockerfileの作成**
一旦シンプルな構成で。
```
touch next/Dockerfile
```
```Dockerfile
# ベースイメージとしてNode.jsを指定
FROM node:18

# 作業ディレクトリを作成
WORKDIR /app

# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./

# 依存関係をインストール
RUN npm install

# アプリケーションの全ファイルをコピー
COPY . .

# Next.jsを開発モードで起動
CMD ["npm", "run", "dev"]
```
**💡Winston導入**
```
npm install winston
```
Next.jsのsrcディレクトリにlibディレクトリを作り、loggerの定義ファイル作成。
```typescript
// next/src/lib/logger.ts

import winston from 'winston';

const logger = winston.createLogger({
    level: 'info',
    format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.json(),
    ),
    transports: [
        new winston.transports.Console(),
        new winston.transports.File({ filename: 'error.log', level: 'error' }),
        new winston.transports.File({ filename: 'combined.log' }),
    ],
});

export default logger;
```
**💡JEST導入**
```
npm install --save-dev jest ts-jest @types/jest
```
テスト用のディレクトリも先に作成しておく。
```
mkdir next/tests
```
```
mkdir next/tests/unit
```
```
mkdir next/mkdir/integration
```
JESTのconfigファイルも作成
```typescript
// next/jest.config.ts
// jest.config.ts
import nextJest from 'next/jest';

const createJestConfig = nextJest({
  dir: './', // Path to the Next.js application directory
});

const customJestConfig = {
  // Where Jest looks for files to test
  testMatch: ['next/tests/**/*.(test|spec).ts?(x)'],
  
  // Transforms TypeScript files using ts-jest
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },

  // Automatically clear mock calls and instances between every test
  clearMocks: true,

  // Setting up the test environment
  testEnvironment: 'jest-environment-jsdom',

  // Specifying module directories for resolving imports
  moduleDirectories: ['node_modules', 'next/'],

  // Setting up module alias to match the next.js alias patterns
  moduleNameMapper: {
    '^@/(.*)$': 'next/src/$1',
  },
};

export default createJestConfig(customJestConfig);
```
テスト用のスクリプト追加
```typescript
"scripts": {
  "test": "jest"
}
```
**.githubでプルリクテンプレート作成**
```
mkdir .github
touch .github/PR_TEMPLATE.md
```

とりあえず今日はここまで。
明日も細かいところを設定しつつ、Next.jsのサーバーコンポーネントとかの実装に着手していく。

しばらく資格勉強に没頭してしまっていてコードを書いていなかったので
久しぶりにちょっとコード触ってとっても楽しい。
座学的なものも好きだけど、やっぱコーディング楽しいし、もっと色々知りたいな〜