【React学習 #9】Next.js - App Routerを学ぶ（その１）

はじめに

この記事はReact初心者の筆者が学習のために書いている記事です。
間違っていたら温かくご指摘いただけるとありがたいです。

やりたいこと

App Routerの機能を使いながら学ぶ。

App Router

App Routerでは、appディレクトリ直下にディレクトリを作成することでルーティングを設定します。
例えば、「app/test」というディレクトリを作成し、更にその直下にpage.tsxというファイルを作成しhttp://localhost:3000/testにアクセスすればpage.tsxで作成したページが表示されます。

app/test/page.tsx

const Page = () => {
    return <div>test</div>;
};

export default Page;

以下はhttp://localhost:3000/testにアクセスした結果です。

同じように、上で作成したtestディレクトリの更に下にtest2ディレクトリを作成します。
そしてpage.tsxを作成すると、http://localhost:3000/test/test2にアクセスできます。

app/test/test2/page.tsx

const Page = () => {
    return <div>test2</div>;
};

export default Page;

以下はhttp://localhost:3000/test/test2にアクセスした結果です。

Layout

layout.tsxというファイルを作成することで、そのディレクトリと更にその下に存在するpage.tsxにレイアウトを適用させることができます。

試しにtestディレクトリ直下にlayout.tsxファイルを作成します。

app/test/layout.tsx

import './test.css';

export default function TestLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return <div className='test-style'>{children}</div>
};

app/test/test.css

.test-style {
    color: red;
    font-size: x-large;
}

以下はhttp://localhost:3000/testにアクセスした結果です。

以下はhttp://localhost:3000/test/test2にアクセスした結果です。

test2ディレクトリにもtestディレクトリ直下に作成したlayout.tsxが適用されていることがわかります。

最後に

App Routerを使えばappディレクトリ直下にディレクトリを作成することでルーティングを設定できることがわかりました。
これまで、バックエンドを中心にやってきた私にとってはちょっと違和感を感じましたが慣れる必要がありそうですね。