大学生・初心者向け！Next.js で簡単ポートフォリオサイトを作る方法

夏休みということで、何か違うことがしたいと思い、自分のポートフォリオ💼を作ることにしました。思ったよりも簡単に取り掛かれてしまったので、自分のポートフォリオを作りたいと考えている大学生や初心者エンジニアさんのために、初心者ながら経験を共有したいと思います。

前提と実行環境

• 私が使用している OS は、macOS です🍎
• GitHub アカウントを保有していることを前提とします。

手順の概要

1. 📥 Node.js のインストーラーをダウンロード
2. 🚀 Next.js プロジェクトを作る
   ーーーここから下は別の記事にまとめます🙇‍♂️ーーー
3. 📂 GitHub リポジトリを作成して Push する (Vercel デプロイに必要)
4. 🌐 Vercel でデプロイ
5. 🎨 ページの中身をカスタマイズ

詳細な手順

1. Node.js のインストーラーをダウンロード

はじめに、Node.js をインストールします。以下のサイトからインストーラーをダウンロードしてください。
Node.jsインストールサイト：https://nodejs.org/ja/download

注意：ご自身の環境に合わせたインストーラをダウンロードしてください。

インストール後は、nodeコマンドやnpmコマンドが使えるようになります。以下のコマンドをターミナルから実行してください。

bash

node -v

→ バージョンが表示されればOK ✅

bash

npm -v

→ npmのバージョンも確認できます

npmとは？

npm (Node Package Manager) は、Node.js のパッケージを管理・インストールするツールです（Pythonでいうpipのようなもの）。

Node.jsとは

Node.js とは、JavaScript をブラウザの外で実行できるランタイム環境です。元々 JavaScript はブラウザ上でしか動きませんでしたが、Node.js によりPCやサーバー上でも動かせるようになりました。

2. Next.js プロジェクトを作る

Node.js の準備ができたら、以下を実行します。

bash

npx create-next-app@latest <my-portfolio>

質問が表示されたら、好みに合わせて選びます。

2.1 テンプレートをブラウザで表示

bash

npm run dev

このコマンドは、next.js 標準で入っている開発用サーバーを立ち上げるコマンドです。
dev の定義は、ホームディレクトリ直下にある package.json 内に記述されています。

package.json

... 省略 ...
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
... 省略 ...

他にも、build : 本番環境のビルド、start : 本番サーバーの立ち上げなどがありますね。

これで開発用サーバーが立ち上がり、ホットリロード機能で即時反映されます。ここからはHTMLやCSSを編集し、自分らしいポートフォリオを作っていきましょう💪

---

まとめ📝

本記事では、Node.js のインストールから Next.js プロジェクト作成、そしてブラウザでの表示までを解説しました。初めてでも短時間でポートフォリオサイトを立ち上げられます。次はデザインやコンテンツをカスタマイズして、あなたらしいサイトに仕上げてください✨

筆者のポートフォリオ作成の進捗が進み次第情報を追加するつもりです。。
中途半端ですみません