次のようなページを作成します。
こちらのページを参考にしました。
Next.js入門（TypeScript版）
プロジェクトの作成
yarn create next-app sample-app --typescript
サーバーの起動
cd sample-app
yarn dev
ブラウザーで
http://localhost:3000/
にアクセスして、デフォールトの画面が表示されることを確認。
ソースの作成
フォルダー構造
$ tree -I node_modules
.
├── README.md
├── components
│ └── layout.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── _app.tsx
│ ├── api
│ │ └── hello.ts
│ ├── gunma.tsx
│ ├── ibaraki.tsx
│ ├── index.tsx
│ └── tochigi.tsx
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── styles
│ ├── Home.module.css
│ └── globals.css
├── tsconfig.json
└── yarn.lock
次のファイルは書き換えてください。
pages/index.tsx
import Link from 'next/link'
import Layout from '../components/layout'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<Layout title="北関東三県" description="北関東三県概要" >
<p>北関東三県を紹介するページです。</p>
</Layout>
)
}
以下のファイルは作成してください。
pages/ibaraki.tsx
import Link from 'next/link'
import Layout from '../components/layout'
import styles from '../styles/Home.module.css'
export default function About() {
return (
<Layout title="茨城県" description="茨城県概要" >
<p>茨城県概要</p>
<p>茨城県は東京の北東に位置し、太平洋に面しています。
県庁所在地の水戸市は、県の中央部にあり、
2 月下旬～3 月にかけて梅が咲き乱れる偕楽園で知られています。
水戸市の西側にある笠間市は、花や龍の飾り彫りが施された笠間稲荷神社で有名です。
笠間市の南西には 2 つの峰を持つ筑波山があり、
目的やレベルに合わせてさまざまなハイキング トレイルが整備されています。 ― Google</p>
</Layout>
)
}
pages/tochigi.tsx
import Link from 'next/link'
import Layout from '../components/layout'
import styles from '../styles/Home.module.css'
export default function About() {
return (
<Layout title="栃木県" description="栃木県概要" >
<p>栃木県概要</p>
<p>栃木県は東京の北に位置し、県内の一部は日光国立公園に指定されています。
杉の木に覆われたこの公園には、火山である男体山がそびえ、
その隣には男体山の噴火で形成された湖、中禅寺湖が水をたたえています。
この湖の東端にあるのが、絵のように美しい高さ 97 m の華厳の滝です。
栃木県西部に位置する日光市には日光東照宮があります。
金が精巧に散りばめられたこの神社には、
江戸幕府初代将軍の徳川家康が祀られています。 ― Google</p>
</Layout>
)
}
pages/gunma.tsx
import Link from 'next/link'
import Layout from '../components/layout'
import styles from '../styles/Home.module.css'
export default function About() {
return (
<Layout title="群馬県" description="群馬県概要" >
<p>群馬県概要</p>
<p>群馬県は本州の山岳地帯にある内陸県で、温泉地とスキー場で有名です。
草津は小さな町ですが、100 を超える温泉があり、
特に有名な湯畑では、湧き出る源泉が木樋を通って滝壺へ流れ落ちる光景が見られます。
海抜 1,200 m にある草津には、スキーやハイキングのコースもあります。 ― Google</p>
</Layout>
)
}
components/layout.tsx
import Head from 'next/head'
import Link from 'next/link'
type Props = {
children?: React.ReactNode
title?: string
description?: string
}
export default function Layout({ children, title, description }: Props) {
const pageTitle = title || 'ホームページタイトル'
return (
<div className="wrap">
<Head>
<title>{ pageTitle }</title>
<meta name="description" content={ description || 'ホームページ概要' } />
</Head>
<header>
<h1>{ pageTitle }</h1>
</header>
<nav>
<button><Link href="/">Home</Link></button>
<button><Link href="/ibaraki">茨城県</Link></button>
<button><Link href="/tochigi">栃木県</Link></button>
<button><Link href="/gunma">群馬県</Link></button>
</nav>
<main>{ children }</main>
<footer>May/25/2022 AM 08:25</footer>
</div>
)
}
ブラウザーで
http://localhost:3000/
にアクセス
vercel にデプロイ
次のバージョンで確認しました。
$ node --version
v18.2.0
$ yarn --version
1.22.18