各ページの作成
環境が整ったところで、index.tsx を作成します。
2023 年 5 月に安定版が出た Next.js v13.4 版の app ディレクトリは、まだ出たばかりで不具合が出る可能性があるので今回は使いません。pages ディレクトリを使う方向で進めます。
index.tsx の作成
次のコードでは、Headコンポーネントを使用してページのタイトルを設定し、css 関数を使用してスタイルを作成し、JSX のdiv要素にスタイルを適用しています。最後に、IndexPage コンポーネントをエクスポートしています。
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import { NextPage } from 'next'
import Head from 'next/head'
const IndexPage: NextPage = () => {
const containerStyles = css`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 3rem;
color: #333;
`
return (
<>
<Head>
<title>Sample Page</title>
</Head>
<div css={containerStyles}>
<h1>Hello, World!</h1>
</div>
</>
)
}
export default IndexPage
About.tsx の作成
Next.js と TypeScript を使用して、About ページを作成するためには、以下の手順があります。
- コンポーネントの作成
- ページコンポーネントの作成
- ルーティングの設定
それぞれの手順について詳しく解説していきます。
まず、表示するためのコンポーネントを作成します。例えば、開発者の紹介カードを作成する場合、次のような DeveloperCard.tsx コンポーネントを作成できます。
// components/DeveloperCard.tsx
import React from 'react'
interface DeveloperCardProps {
name: string
role: string
description: string
}
const DeveloperCard = ({ name, role, description }: DeveloperCardProps) => {
return (
<div className="developer-card">
<h3>{name}</h3>
<p>
<strong>役割:</strong> {role}
</p>
<p>
<strong>自己紹介:</strong> {description}
</p>
</div>
)
}
export default DeveloperCard
ページコンポーネントの作成
次に、About ページのコンポーネントを作成します。ここでは、DeveloperCard コンポーネントを利用して開発者情報を表示します。
// pages/about.tsx
import React from 'react'
import DeveloperCard from '..components/DeveloperCard'
const About = () => {
const developers = [
{
name: '山田 太郎',
role: 'フロントエンドエンジニア',
description: 'Next.jsとTypeScriptが得意です。',
},
{
name: '鈴木 一郎',
role: 'バックエンドエンジニア',
description: 'API開発に力を入れています。',
},
]
return (
<div className="about-page">
<h1>About Us</h1>
<p>私たちのプロジェクトチームについての情報を提供するためのページです。</p>
<div className="developer-cards">
{developers.map((developer, index) => (
<DeveloperCard key={index} name={developer.name} role={developer.role} description={developer.description} />
))}
</div>
</div>
)
}
export default About
ここでは、developersという配列に開発者情報を格納し、それを.map()を使ってDeveloperCardコンポーネントに渡しています。これにより、複数の開発者情報を簡単に表示できます。