![見出し画像](https://assets.st-note.com/production/uploads/images/127085132/rectangle_large_type_2_ecc021a177fbd786d5deef8a5852b9ba.jpeg?width=1200)
【Chromebook】Next.js の開発環境を作るのよ
年の瀬も押し迫るある日、クライアントさんは言った。
「新年の挨拶を1月1日の午前0時に公開して欲しい。」
・・・
おばちゃんのウェブサイト制作は、伝統の技、手間ひまかけた手作りが自慢。ウェブサイトの更新はもちろん手動で、予約投稿なんて洒落たものは取り入れていない。
2024.1.12追記「洒落たものを取り入れました」
そして年末年始は旦那の実家に帰省することになっていた。Macbook Pro は運ぶには結構重い。はてさて困った。
!
そうよ。Lenovo IdeaPad Duet Chromebook があるじゃない?
ということで、急ぎ Chromebook に Next.js の開発環境を構築することになった、昨年末のてんやわんやの備忘録。
とにかく Node.js をインストールする
Macbook に開発環境を作った当時のことは鳥頭なので、もうすっかり忘れている。検索したら、Microsoft のウェブサイトにわかりやすくまとまっていたから、こちらを参考にした。
(おばちゃん的には、Windows の WSL 上も、Chromebook の Linux 上も似たようなものと思っているけれど、本当のところはどうなのかしらね?)
まずは、cURL をインストールして、
$ sudo apt-get install curl
nvm をインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
nvm のバージョンを確認して、
$ nvm --version
0.39.7
Node.js の現在の安定版 LTS と一つ前の LTS をインストール
$ nvm install --lts
$ nvm install node@18.19.0
インストールした Node.js を確認して
$ nvm ls
v18.19.0
-> v20.10.0
default -> lts/* (-> v20.10.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v20.10.0) (default)
stable -> 20.10 (-> v20.10.0) (default)
lts/* -> lts/iron (-> v20.10.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2 (-> N/A)
lts/hydrogen -> v18.19.0
lts/iron -> v20.10.0
現在の選択しているバージョンを確認
$ node --version
v20.10.0
npm があることも確認して、
$ npm --version
10.2.5
npm で Yarn をグローバルにインストール
2024.4.6訂正追記「npm で Yarn をインストールしたら、'apt-key is deprecated. ' って言われてしまいました。Corepack を使うという手もありますが、Yarn を諦めて npm に戻りました」
が、その前に考えるべきは Node.js 用バージョンマネージャー
ここまできて、Macbook では Node.js 用バージョンマネージャーを Volta にしていたことを思い出した。
![](https://assets.st-note.com/img/1704722680884-NJs3SBaitr.png?width=1200)
やっちまった。こうして毎回、行き当たりばったりの開発環境が出来るのだな。
SSH 鍵を作るのがツライ
今回も面倒くさいので失敗はスルーする。Chromebook のノードのバージョンは nvm で管理。(まあ、なんか似てるし)
で、次は GitHub からリポジトリを取ってくる。
そういえば、GitHub とのやり取りは SSH でしているから、SSH の秘密鍵と公開鍵を作らなきゃいけないんだっけ?
・・・
忘れた。もう全部忘れた。
検索したら、GitHub の公式サイトに書いてあった。焦っていても、まず見るべきは公式サイトだわね。
それにしても SSH 鍵を作るのが怖い。Vim で文字を打つぐらい怖い。失敗したら色々アクセス出来ないんじゃないかって、理由の分からない恐怖心が何年経ってもなくならない。
しかし、GitHub と(SSH で)やり取りするなら、誰しも一度は通る道。覚悟を決めて手順通りにやる。
$ ssh-keygen -t ed25519 -C "自分のメールアドレス"
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_ed25519
これで、SSH の秘密鍵と公開鍵ができて、鍵を ssh-agent に登録できたはず。
よし、GitHub のウェブサイトにログインして、公開鍵を追加しよう。
で、お目当てのリモートリポジトリの SSH URL をコピーする。
ローカルに戻って、Linux ファイル内に Work (任意名)ディレクトリを作成、ターミナルで Work ディレクトリに移動して git クローン。
$ git clone git@github.com:obachan/example.git
あれ? パスフレーズを聞かれる。
(これとは別に作ったSSH 鍵で Xserver にログインする時は、パスフレーズを省略して行けるのに、GitHub はパスフレーズを聞かれる・・・が、今は原因を考えない。仕方がないから今のところは毎回パスフレーズを入力する)
公式サイトからダウンロードしておいた VSCode で、Work ディレクトリ内にできた example ディレクトリを開く。
![](https://assets.st-note.com/img/1704723729737-QnAzpx1yfy.png?width=1200)
ああ、やっと見慣れた画面まで来れたよ。
ゴール目前。Next.js をインストールする
2024.3.27追記「Corepack で Yarn と Next.js を一緒にインストールすることをオススメします」
2024.4.5追記「最終的に npm で Next.js をインストールしました」
ターミナルで Yarn を使って Next.js をインストール ※下は参考まで
$ yarn add next react react-dom
で、動作確認。
$ yarn dev
これにて Next.js の環境は整った。
とはいえ今回の件で、Next.js 13から14にアップデートする羽目になったり、特定の日(元旦)になったら表示させる方法は Javascript でいけたかもしれない。というのは、また別の話。
追記「Xserver SSH キー の鍵名を変更して作成したメモ」
obachan@penguin:~/.ssh$ ssh-keygen -t rsa -f id_rsa_chrome
2024.1.13追記「Next.js 13 -> 14」
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
yarn add @types/react @types/react-dom typescript
この記事が参加している募集
WEBデザイナー(自営業)のおばちゃんです。最近はBlenderネタ多めです。