Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。
Next.js(ネクストジェイエス)とは、JavaScript(React)をベースにした、Webアプリ開発のフレームワークです。画面の部品作りからページの切り替え、サーバー側の処理まで、Webアプリに必要な仕組みがひと揃い入っています。このサイト自身もNext.jsで作られています。
「Webアプリ開発のフルセット工具箱」です。素のJavaScriptだけで本格的なアプリを作るのは、金づち1本で家を建てるようなもの。Next.jsには「ページの仕組み」「表示の高速化」「サーバー処理」など、必要な電動工具が最初から揃っていて、作るものの中身に集中できます。
「React=エンジン、Next.js=エンジンを積んだ完成車」とイメージすると近いです。
初心者がつまずきやすいポイント
JavaScriptの基礎を飛ばしていきなりNext.jsから入ると、「どこまでがJavaScriptで、どこからがNext.jsの機能なのか」が分からず混乱します。とはいえ今はAIと一緒に作りながら覚える時代。分からないコードはAIに「これは何をしている?」と聞きながら進めれば大丈夫です。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS(シーエスエス)
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML(エイチティーエムエル)
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Supabase(スーパベース)
データベース・ログイン機能・ファイル保管をまとめて用意してくれるサービス。サーバーを自分で用意しなくても、会員制サイトの土台が作れる。