NextJSフレームワークの基本的な仕組み
前のレッスンでは、NextJSフレームワークをインストールし、 その基本的な構造について学びました。 いよいよ本格的な作業に取り掛かる時です。
NextJSの核心となる部分はルーティングです。 ルーティングの仕組みは次の通りです：ユーザーが ブラウザのアドレスバーにURLを入力すると、 NextJSフレームワークは、そのURLに対応する 特定のファイルをブラウザに返します。
NextJSのルーティングは独特な方法で構成されています。
その本質は、リクエストされたURLそれぞれが
src/app内の特定のフォルダに対応することにあります。
そして、そのフォルダ内には
page.jsxという名前のファイルが必要です。
まさにこのファイルがブラウザに返されます。
なお、このファイルではJSXでコードを書き、
ブラウザには完成したHTMLコードのページが送信されます。
例を見てみましょう。
URL /test/ に対して、特定のテキストを
返したいとします。
対応するフォルダを作成します：src/app/test。
このフォルダ内に、以下の内容のpage.jsx
ファイルを作成します：
export default function Test() {
return <h1>hello, user!</h1>;
}
ブラウザでこのURLを開いてみてください： /test。 すると、JSXファイル内に記述したテキストが 表示されるはずです。
テキストを変更してファイルを保存してみてください。 保存後、ブラウザのテキストも自動的に変更されます。 これが開発モードでのNextJSの動作です。
アドレス /about にアクセスした際に、
ブラウザにあなたの名前と名字を含むメッセージが
表示されるようにしてください。
