Next.js で個人のポータルサイトを作ってみた -Part 1/5-

はじめに

本記事では、個人のポータルサイトを作成するにあたり、Next.js を使ったアプリのテンプレートを作成していきます。

使用技術

• Next.js: Reactのフレームワーク

• TypeScript: 型安全な開発のために採用

• Tailwind CSS: スタイリングをシンプルに

• ESLint & Prettier: コード品質の維持

環境構築

Next.js のプロジェクトを作成するために、npx を使用します。npx は Node.js に付属しているコマンドですが、バージョンが古いと利用できない場合があります。npx を使用する前に、以下のコマンドで Node.js のバージョンを確認しましょう。

$ node -v

推奨バージョンは Node.js 18 以上 です。古い場合は、Node.js公式サイト から最新版をインストールしてください。

Next.js プロジェクトの作成

以下のコマンドで Next.js の新しいプロジェクトを作成します。

$ npx create-next-app@latest my-portfolio --typescript

プロジェクト作成時の設定

セットアップ中に以下のオプションを選択します。

• src/ ディレクトリの使用: No

• Tailwind CSSの使用: Yes

• App Router の使用: Yes

• Turbopack の利用: No

• ESLint の設定: Yes

• インポートエイリアスのカスタマイズ: No

フォルダ構成

今回作成したテンプレートの基本的なフォルダ構成は以下のようになっています。
実際に私が動かして、commitしたものがこちらです。

my-portfolio/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
├── public/
├── .eslintrc.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── tailwind.config.js
├── tsconfig.json

動作確認

以下のコマンドでアプリケーションを立ち上げ、 localhost:3000 にアクセスします。

$ npm run dev

以下のような画面が表示されれば、立ち上げ成功です。

まとめ

ここまでで Next.js を使ったテンプレートのセットアップが完了しました。次回は、実際にポートフォリオのプロフィールページの作成を進めていきます！
➡ コードは GitHub リポジトリ に公開しています。ぜひ参考にしてください！