Next.js の使い方 (TypeScript)

次のようなページを作成します。
![next_may2501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/11618d00-38a5-b652-0aea-4f4757f524a6.png)

こちらのページを参考にしました。
[Next.js入門（TypeScript版）](https://www.webopixel.net/javascript/1714.html)

## プロジェクトの作成 ##

```bash
yarn create next-app sample-app --typescript
```

サーバーの起動

```bash
cd sample-app
yarn dev
```

ブラウザーで
http://localhost:3000/
にアクセスして、デフォールトの画面が表示されることを確認。

## ソースの作成 ##

フォルダー構造

```text
$ 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
```

次のファイルは書き換えてください。

```tsx: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>
    )
}
```

以下のファイルは作成してください。

```tsx: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>
    )
}
```

```tsx: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>
    )
}
```

```tsx: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>
    )
}
```

```tsx: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>
			&nbsp;&nbsp;
                    <button><Link href="/ibaraki">茨城県</Link></button>
			&nbsp;&nbsp;
                    <button><Link href="/tochigi">栃木県</Link></button>
			&nbsp;&nbsp;
                    <button><Link href="/gunma">群馬県</Link></button>
			&nbsp;&nbsp;
            </nav>
            <main>{ children }</main>
            <footer>May/25/2022 AM 08:25</footer>
        </div>
    )
}
```

ブラウザーで
http://localhost:3000/
にアクセス

## vercel にデプロイ ##
![vercel_may2501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/54461603-b43f-b547-802a-f3cbe96c6709.png)

次のバージョンで確認しました。

```text
$ node --version
v18.2.0
$ yarn --version
1.22.18
```