Nextjs

JavaScript

【Next.js】layout.tsxで共通レイアウトを作る

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

【Next.js】ファイルベースルーティングの基本:page.tsxの役割

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

【Next.js】プロジェクトのフォルダ構成を理解する(appディレクトリの中身)

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

【Next.js】create-next-appで環境構築する手順

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

【Next.js】Next.jsとは?Reactに「ルーティング・SSR」を足すフレームワーク

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