【Chromebook】Next.js の開発環境を作るのよ
年の瀬も押し迫るある日、クライアントさんは言った。
「新年の挨拶を１月１日の午前０時に公開して欲しい。」
・・・
おばちゃんのウェブサイト制作は、伝統の技、手間ひまかけた手作りが自慢。ウェブサイトの更新はもちろん手動で、予約投稿なんて洒落たものは取り入れていない。
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.7Node.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.0npm があることも確認して、
$ npm --version
10.2.5npm で Yarn をグローバルにインストール
2024.4.6訂正追記「npm で Yarn をインストールしたら、'apt-key is deprecated. ' って言われてしまいました。Corepack を使うという手もありますが、Yarn を諦めて npm に戻りました」
が、その前に考えるべきは Node.js 用バージョンマネージャー
ここまできて、Macbook では Node.js 用バージョンマネージャーを Volta にしていたことを思い出した。
やっちまった。こうして毎回、行き当たりばったりの開発環境が出来るのだな。
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 ディレクトリを開く。
ああ、やっと見慣れた画面まで来れたよ。
ゴール目前。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_chrome2024.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 typescriptWEBデザイナー（自営業）のおばちゃんです。最近はBlenderネタ多めです。