Nextjs

こんにちは、かつコーチです。前回は loading.tsx・error.tsx・not-found.tsx を使って、状態ごとのUIを整える方法を解説しました。ここまでで一通りルーティング周りは押さえられましたが、実はNext.jsのApp...

こんにちは、かつコーチです。前回は動的ルートとルートグループを使って、URLに応じたページ作りとフォルダ整理の方法を解説しました。ページの構造ができても、データ取得中の「白い画面」やエラー発生時の「真っ白なエラーページ」をそのまま放置すると...

こんにちは、かつコーチです。前回までで、page.tsx によるファイルベースルーティングと、layout.tsx を使った共通レイアウトの作り方を解説してきました。ここまでは「固定のURL」しか扱ってきませんでしたが、実際のアプリでは /...

こんにちは、かつコーチです。前回はpage.tsxを使ったファイルベースルーティングの基本を解説し、フォルダを増やすだけでページが増えることを確認しました。ページが増えてくると、今度は「どのページにも共通するヘッダーやフッターを、毎回コピペ...

こんにちは、かつコーチです。前回はappディレクトリの中身を見ながら、page.tsxとlayout.tsxがどんな役割を持つファイルなのかを軽く紹介しました。今回はその中でもpage.tsxにフォーカスして、Next.jsの大きな特徴であ...

こんにちは、かつコーチです。前回はcreate-next-appを使って、実際にNext.jsのプロジェクトを作成しました。作成されたフォルダを開くと、見慣れないファイルやディレクトリがたくさん並んでいて、戸惑った人も多いのではないでしょう...

こんにちは、かつコーチです。前回はNext.jsとは何か、Reactとの関係を解説しました。Next.jsが「Reactにルーティングやサーバーサイドレンダリングを足したフレームワーク」だとわかったところで、今回は実際に手を動かして、自分の...

こんにちは、かつコーチです。これまでJavaScriptの基礎からTypeScript、React、Vue.jsまで、たくさんの記事を書いてきました。いよいよ今回から新しいシリーズとして、Next.jsというフレームワークを解説していきます...