10.
コンポーネント
モジュールのインストール
モジュールの種類
「styled-components」や「material-ui」などの外部モジュールを利用して、デザインされたコンポーネントを作成します。
styled-components
「styled-components」は、コンポーネントにスタイル設定する便利なモジュールです。
material-ui
「material-ui」は、Material Design ベースでデザインされた UIコンポーネントを作成できるモジュールです。汎用的なアイコンがたくさん用意されています。
インストール
「styled-components」と「material-ui」をインストールします。アイコンは容量が多いので多少時間がかかります。
npm i styled-components
npm i @material-ui/core @material-ui/icons
「package.json」にモジュール設定が追加されます。
package.json
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"next": "^12.3.4",
"react": "17.0.2",
"react-dom": "17.0.2",
"styled-components": "^5.3.3"
},
ページの修正
Head コンポーネント
Next.jsでは、headタグをHeadコンポーネントで追加できます。「next/head」モジュールをインポートしてきます。
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head></Head>
</div>
)
}
Headの修正
「pages/index.js」を開き、Headコンポーネントのtitleタグを「Next Chat」に変更します。
pages/index.js
<Head>
<title>Next Chat</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
サーバの自動反映
ファイル保存すると自動ビルドされるため、毎回のサーバー再起動は必要ありません。また、リアルタイムでブラウザも反映されます。
コンテンツ修正
「index.js」のJSXで不要な部分を削除し、h1タグでページタイトルを追加しました。
pages/index.js
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Next Chat</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Next Chat</h1>
</div>
)
}
確認
ファイルを保存して、コンテンツが反映されるか確認します。
Emmetが利用できない場合
VSCodeのユーザ設定
VSCodeでJSXがコードアシスタントできないときは、ユーザ設定「setting.json」の「emmet.includeLanguages」に「javascriptreact」を登録します。
setting.json
...
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
...
setting.json の開き方
VSCodeのコマンドパレットから「基本設定：ユーザー設定を開く（JSON）」を選択します。
ページの作成
chat.js の作成
「page」フォルダに「chat.js」を作成します。
ファンクションコンポーネントの入力
「rfce」と入力して確定すると、Reactのファンクションコンポーネントが追加されます。 ※「React」用のVSCodeプラグインインストール済み
pages/chat.js
chat.js
import React from 'react'
function chat() {
return (
<div>chat</div>
)
}
export default chat
JSX追加
「chat.js」のJSXにタイトルを追加してページを確認します。
pages/chat.js
function chat() {
return (
<div>
<h2>Chat</h2>
</div>
)
}
export default chat
Dynamic Routing
Dynamic Routingとは
Next.jsアプリのURLは、Webルートを起点に 「pages」フォルダに配置したファイルやフォルダのに対応しています。これを動的ルーティング（Dynamic Routing） といいます。
ルーティング
現状のルーティングはつぎのようになっています。「index.js」はフォルダのトップページなので省略できます。
ホームのルーティング
- ファイル：pages/index.js
- URL : http://localhost:3000/
chat のルーティング
- ファイル：pages/chat.js
- URL : http://localhost:3000/chat
chat ページの確認
chatページにアクセスして、「chat.js」のHTMLが表示されるか確認してみましょう。
外部コンポーネント
外部コンポーネントとは
外部コンポーネントはHTMLの共通部分をファイル作成し、再利用する機能です。Next.jsでは「components」フォルダで管理するのが一般的です。
外部コンポーネントフォルダの作成
「components」フォルダを作成します。
SideMenuコンポーネントの作成
外部コンポーネントとして「SideMenu.js」を作成します。
「SideMenu.js」にファンクションコンポーネントを追加し、JSXにコンテンツを追加します。
components/SideMenu.js
import React from "react";
function SideMenu() {
return (
<div>
<h2>Side Menu</h2>
</div>
)
}
export default SideMenu
SideMenuコンポーネントの利用
SideMenuのインポート
「index.js」でSideMenuコンポーネントをインポートします。
import SideMenu from '../components/SideMenu'
「SideMenu」タグを追加します。
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Next Chat</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<SideMenu></SideMenu>
<h1>Next Chat</h1>
</div>
)
}
ブラウザで確認
SideMenu コンポーネントが読み込まれたか、ホームページにアクセスして確認してみましょう。
