Next.js勉強するぞ(その一)
たまにはちゃんと職業柄の事を書こうと思いまして笑。
最近全然何もキャッチアップできてなくて、Next.jsをおすすめされて始めることにしました。
React自体は触ったことあるからイケるやろ精神。
多分技術的な参考には全然ならんと思うのでその辺はZen○とかQiit○とか見てもらって(酷い)。
その一って付けたけど続くかわからん！
あんまりにも(自業自得で)躓いて笑い話にしたいだけです！
開発環境
Linux Mint
Visual Studio Code
初っ端環境構築に躓く
環境構築難しくないはずなんですが、PC使ってなくてあまりにも最新化してなかったせいでやたら回り道をしてしまいました。
まず、Node.jsが14とかで(最新が20苦笑)バージョンあげたんですけどプロジェクト作るコマンドがエラーになりましてなんでやねーん
どうもUbuntuのバージョンが古かったらしい(Linux Mint 19.0だった)
仕方ないのでバージョンを上げて見ることにしたんですが、19.0→19.3に上げてから20.0に上げるのでまぁ時間がかかる。
多分2、3時間くらいなんだかんだ待った😂
ひとまずこれでnpx create-next-appコマンドが通りました。
サンプルコードが動かない
さぁてこれでHello Worldも出せたことだしやっていくぞ！となったんですが
サンプルコードコピペなのに動かないなんで？
構築した環境Next.jsが14なんですが13より前とちょっとルーティングの書き方が変わってるらしい。
そんな罠が…。
13まではpagesフォルダに入れれば良かったみたいなんですが
14はappフォルダにpageって名前で入れないとダメっぽい。
名前変えたら404になっちゃって積んだ。
入門サイトは諦めて公式チュートリアルをやることにした😣
英語がまじでわからん
公式チュートリアル今のとこ英語しかない？のでなんとか読み進めることに。
本文はまだ良いんだけど途中で出てくるクイズみたいのが、もうわからん！日本語プリーズ！
githubとデプロイに躓く
チュートリアルの6章がgithubにコミットしてデプロイしましょうって内容なんですけど、躓いてめっちゃ凹んだ。
webエンジニアとして自信がばっきばきに折られた笑
言い訳しちゃうと長らく仕事がSVNとかVSSとかでね(歳がバレる)
gitもう忘れた…感。
どっちかというとVSCodeからコミットするのどうやるんだっけ？って感じ(結局拡張機能がうまく動いてなかったんだけだった)。
で、デプロイ使ったことないやつで説明見ながらぽちぽちやってくんだけどさここでもエラーメッセージ英語わからんんんん…って少々躓く。
お前本当アメコミ原書で読んでるのか？？？？って自問自答しちゃたよ。
なんとかこうとかデプロイ成功した！と思ったら404エラー！なんで！？
ほんとしょーもない事なんだけどNext.js選択してなかったんです。
チュートリアルも多分名前入れてデプロイだよしか書いてないよ…。
…というわけでとりあえず6章まではなんとかこうとか完了まで行きました。
続きもぼちぼちやっていこうと思うので、書けたら書きます。
とりあえず先人たちのブログマジでありがとう(感謝)
この記事が気に入ったらサポートをしてみませんか？