kumarishin プログラミング言語はいろいろあって、その中でも流行り廃りがありますが、フロントエンドエンジニアとしての最近のトレンドの一つに、Next.jsがありますね。
Next.js（ねくすとじぇいえす）はJavascriptのフレームワークの一つで、ReactやTypescriptを利用して構築していきます。
おしゃれなサイトができやすい、最近流行りの他のライブラリやツールとも互換性があるのも魅力でしょう。
プログラミングを学びはじめると、HTML・CSSからいってみよー！というのがどのサイトや本でも書かれているのですが
なかなかその2つだけだと効率的にお仕事に結びつきません。
そうすると新しいスキルを身につけようという動きになって、JavascriptやPHPといった言語を扱い、WordPressでホームページ制作ができるようになっていくというのがメジャーなロードマップになります。
そのJavascriptもいろんなライブラリ・フレームワークがあるわけですが、最近はもっぱらTypescriptを利用しつつReactを使ってNext.jsでサイトを構築していくのが主流でしょう。むしろこれら使わないとフロントエンドエンジニアとしての未来が閉ざされるんじゃ無いかってくらいです。
じゃあどうやって学んでいくかという話になりますが、書籍・学習サイトとありますが私がお勧めするのはYoutubeです。それも英語のチャンネルがおすすめ。一連の動きをまとめた動画で、数時間に及ぶものがゴロゴロ公開されていますので、それを見ながら手を動かしていくのがスキル定着にはもってこいです。
まずは手を動かしつつ、何をやっているのかわからない部分があればChatGPTなどに聞いてみるのが効率の良い勉強になるでしょう。
というわけで、私も動画を見つつサイトを構築していってます。
参考にしている動画はこちら。
そしてつくっているコードはこちらです（随時更新予定）
ここではどんなことを学んだのか、アウトプットとして記事を用意していこうと思います。
まずは第一弾としてやったことを。
環境設定
ターミナルを開いて、新規にnext.jsのappを作成します。
npx create-next-app@latest アプリ名この後に出てくる設定はすべてデフォルトのまま進めています。
必要なもののインストール
今回はTailwindcssやTypescriptは最初から入れてましたのでそんな必要となるものはなかったですが、UI構築のためにShadcnというのを利用しています
npx shadcn-ui@latest initそしてTailwindのアニメーションも追加しているので
npm install tailwindcss-animateあとはダークモードの設定やらで
npm install next-themesといった感じでインストールをしています。現時点では。
それぞれの公式サイトはこちら。
こうみると、『必要なものをインストール』と『インストールしたものを利用してコーディング』を行き来している感じがあります。
page.tsxの作成
トップページ、今回はログインをするようなページになるのですが、これを作成していきます。
詳しいコードはGithubを参考にという感じですが、やっていることは、Formのコンポーネントを用意して表示することと、簡単なレイアウトとしてロゴ画像だったり画面右側に画像を表示させることをやっています。
componentsの作成
コンポーネントはFormコンポーネントを用意しています。
現時点ではUsernameを入れられるフォームを作り、それが規定文字数以下だったらエラーになるように作ってます。
いやー、これを一からフォームタグ使って実装しようとすると既に辛い未来が見えるので、こういった時にライブラリをすっと利用できるっていうのは本当にありがたいですね。
現状
現時点ではレスポンシブ対応がまだなので、画像もずれるし、実際のログイン認証なんかも実装はできてない状態。
英語の動画ってどうなの？
英語版の動画を見ていて、本当に理解しているの？と質問が来そうですが、言葉を全て理解しているわけではありません。
大事なのは、画面で何をしているのかがわかることであったり、推測しながら手を動かすことです。
確かに日本の動画の方がわかりやすいですが、海外の動画の方がおしゃれなサイトを作る動画が多かったりして作っていく楽しみは大きいんですよね。
意外と言葉がわからなくても何とかなるもんだと、HTMLの学習時代から感じているので、日本の動画で参考にするものが見つからない方はチャレンジしてみることがおすすめです！
そんな感じで引き続き頑張っていきたいたいと思います。
Instagramではプログラミング初学者向けに情報発信をしています。気軽にフォロー・コメント待ってます🎵
