Docker の導入
Docker を使用して、Next.js と TypeScript のプロジェクトを簡単にセットアップし、開発環境を効率化する方法を説明します。まず、Dockerfile を作成し、以下の内容を記述します。
# Dockerfile
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]
次に、docker-compose.yml ファイルを作成し、以下の内容を記述します。
version: '3'
services:
nextjs:
build: .
ports:
- '3000:3000'
volumes:
- .:/app
- /app/node_modules
プロジェクトのセットアップ
次に、プロジェクトをセットアップしましょう。まず、package.json ファイルを作成し、以下の内容を記述します。
{
"name": "nextjs-typescript-docker",
"version": "1.0.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint . --ext .ts,.tsx"
},
"dependencies": {
"next": "^11.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/node": "^14.17.6",
"@types/react": "^17.0.20",
"eslint": "^7.32.0",
"eslint-config-next": "^11.1.2",
"typescript": "^4.4.2"
}
}
また、TypeScript の設定ファイル tsconfig.json を作成し、以下の内容を記述します。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
コンポーネントの作成
では、Next.js と TypeScript を使ったコンポーネントを作成してみましょう。components ディレクトリを作成し、その中に Hello.tsx ファイルを作成します。以下の内容を記述します。
// components/Hello.tsx
import React from 'react'
type Props = {
name: string
}
const Hello = ({ name }: Props) => {
return <div>Hello, {name}!</div>
}
export default Hello
このコンポーネントは、name というプロップを受け取り、Hello, {name}! というメッセージを表示します。
ページの作成
次に、pages ディレクトリを作成し、その中に index.tsx ファイルを作成します。以下の内容を記述します。
// pages/index.tsx
import React from 'react'
import Hello from '../components/Hello'
const Index = () => {
return (
<div>
<h1>Next.js with TypeScript and Docker</h1>
<Hello name="world" />
</div>
)
}
export default Index
このページでは、先ほど作成した Hello コンポーネントをインポートし、name プロップに "world" を渡しています。これにより、ページに "Hello, world!" というメッセージが表示されます。
開発サーバーの起動
Docker を使って開発サーバーを起動しましょう。ターミナルで以下のコマンドを実行します。
docker-compose up
コンテナが正常に起動したら、ブラウザで http://localhost:3000 にアクセスします。画面に "Next.js with TypeScript and Docker" というタイトルと、"Hello, world!" というメッセージが表示されていることが確認できます。
まとめ
この記事では、Docker を使って Next.js と TypeScript のプロジェクトを簡単にセットアップし、開発環境を効率化する方法を解説しました。これにより、開発環境の構築や共有が容易になり、プロジェクトを迅速に開始できます。
Docker を活用することで、Next.js と TypeScript のプロジェクトを効率的に開発することが可能です。ぜひこの方法を試してみてください。