Zenn
🐥

Windows WSL2/Ubuntu上でGitからNext.jsプロジェクトをCloneする流れ

2024/08/29に公開
Next.js
tech

はじめに

今回はグループでの開発であること、開発環境の差を極力少なくするため、Next.jsがNode.jsをベースに動くことからLinux上の方がスムーズに動くことが予想されることWSL2つまりLinuxでの開発を選択した。

環境

Windows11
WSL2
Ubuntu

前提

すでにWindows11にWSL2とUbuntu環境が作られているものとする。

流れ

  1. ubuntuシステム上のパッケージを最新状態にする

下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。

sudo apt update

ubuntuシステム上のパッケージを最新状態にする

  1. Ubuntu上でGitが使えるようにする

下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。

sudo apt install git curl -y

Ubuntuの公式リポジトリにあるパッケージで、システム全体にインストールされる。これにより、どのディレクトリからでもgitコマンドを使用できるようになる。

  1. nvmをインストールする
    下記コマンドはUbuntuシステム全体に対して行われるのでどのディレクトリで実行してもOK。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  1. nvmのコマンドを使えるようにする
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
  1. Node.jsの最新版をインストール
nvm install node
  1. GitHubからクローンする
    プロジェクトを開発予定のディレクトリに移動する。
git clone https://ユーザ名:トークン@github.com/teamnetjp/your-nextjs-project.git"

ユーザ名
自分のGitHubのユーザ名

トークン
自分のGitHubで発行したトークン

github.com/teamnetjp/your-nextjs-project.gitには、GitHubリポジトリのClone用のURLをコピペする。

  1. Cloneしたディレクトリに移動する
cd your-nextjs-project

※your-nextjs-projectは該当のディレクトリ名を入れる

開発時は？

  1. Visual Studio Codeで開く

Windowsディレクトリ内のUbuntu→home→wslで該当ディレクトリを開く。
開くときにVisualStudioCodeで開く。

  1. 開発サーバーを起動する

依存パッケージのインストール
Ubuntuターミナルで行うこと。VSCodeのターミナルからだとWindowsのフォルダ構成になってしまいエラーが出ます。※もし出ない方法あれば教えてください

npm install

開発サーバーの起動

npm run dev

以下のような表示がでます。

//省略
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1726ms
  1. ブラウザで表示を確認

http://localhost:3000
を確認しましょう。

src/page.tsx
に表示されているものがlocalhost:3000で表示されたらOK。

Discussion