はじめに
こんにちは、リッキーです。
今回は、複数のアプリ画面をボタン操作で移動できるようにしてみたいと思います。
Next.jsに関して基礎的なことを色々記事にしているので、まだご覧になっていない方は他記事も見返してもらえると有難いです。
環境について
今回の記事で行う作業の環境(ライブラリのバージョンや、WindowsかMacどちらを使っているかといった情報)の紹介をしていきたいと思います。
今までは環境によって動作の影響がほとんどない基礎的な内容に関して説明したため省略していました。しかし今回はライブラリのバージョンによって動作が大きく変わるためご紹介します。
- OS：Windows 11 Home
- ライブラリ：
“@emotion/react”: “^11.14.0”
“@emotion/styled”: “^11.14.0”
“@mui/material”: “^7.1.1”
“next”: “15.1.7”
“react”: “^19.0.0”
“react-dom”: “^19.0.0”
“@eslint/eslintrc”: “^3”
“@types/node”: “^20”
“@types/react”: “^19”
“@types/react-dom”: “^19”
“eslint”: “^9”
“eslint-config-next”: “15.1.7”
“postcss”: “^8”
“tailwindcss”: “^3.4.1”
“typescript”: “^5”
急に大量の情報が出てきて混乱されていると思いますが、見てもらいたいのは赤字の部分です。画面遷移機能はver13.4より前か後かで大きく実現方法が変わります。「Pages Router」か「App Router」かです。今回は後者のApp Routerという方法を使うということを覚えておいてください。
画面遷移について
まずは、App Routerはどのように画面遷移するか説明したいと思います。
他にアプリ画面を作成する際は、設定ファイルに1つ1つ設定しなければならないことが多いですが、Next.jsでは作成したい画面のパスの名前のフォルダを作成して、その中に「page.tsx」を配置することで、自動でパスが設定され、page.tsxの内容が表示されるようになります。
フォルダ構成のイメージ例を以下に示しますが、例のように配置することで、
[ベースURL]/notebookや、[ベースURL]/textbookといったパスで画面が表示できるようになります。
今回は、3つ画面を用意して画面遷移できるようにしたいと思います。
コード例
コード例を以下に示します。カッコ内には従来のものを修正するのか、新規で作成するのか示しています。
globals.css(修正)
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
page.tsx(修正)
import Button from ‘@mui/material/Button’;
export default function Home() {
return (
<div>
<header>
<div>
遷移しました
</div>
<Button className=’styled’>
ボタン
</Button>
<a href=”https://rikki-hobby.com/”>
リンク
</a>
</header>
<div>
<div>
コンテンツ部
</div>
<input name=”test” defaultValue=”入力フォーム”
style={{border: “2px solid black”}}/>
<a href={“/textbook”}>/textbookへ</a>
</div>
<footer>
<div>
フッター部
</div>
</footer>
</div>
);
}
textbook/page.tsx(新規作成)
import TextField from ‘@mui/material/TextField’;
export default function TextBook() {
return (
<div className=”flex-container”>
<TextField
id=”outlined-multiline-flexible”
label=”名前を入力”
multiline
maxRows={4}
sx={{
marginTop: 2
}}
/>
<a href=”/notebook” className=”styled-link”>設定する</a>
</div>
);
}
notebook/page.tsx(新規作成)
import TextField from ‘@mui/material/TextField’;
export default function TextBook() {
return (
<TextField
id=”list-display”
multiline
maxRows={3}
sx={{
marginTop: 2,
marginLeft: 2
}}
disabled
value={“山田太郎\n25歳\n会社員”}
/>
);
}
実行結果
上のコードを作成することで、「/」(ルート)、「/notebook」、「/textbook」の3つの画面とそのパスが実際に設定されます。フォルダ構成と対応づいていて、直感的に理解しやすいと思います。他フレームワークでは設定ファイルを別に用意して一つ一つのパスを設定することが多いので、この点はNext.jsは大きく異なります。
実行したうえで、各画面のaタグをクリックしてみてください。画面遷移することが分かると思います。画面遷移そのものは以前説明した通りaタグで可能なのですが、そのパスを自動で作成してくれるというわけです。
このような機能(動的ルーティングといいます)を始めとして、Next.jsはゼロコンフィグという機能があり、プログラマーが一切意識せずともWebアプリに必要な最低限の設定をしてくれます。今回のパス設定も最低限の設定の一つということになります。
さいごに
Next.jsで、画面遷移を実装してみました。
コメント・ご指摘等いただけると励みになります。
ご覧いただきありがとうございました。
コメント