Next.js, TypeScript, Tailwind CSS, Vercelでのアプリケーション構築

# Overview
Next.js, TypeScript, Tailwind CSS, Vercelを使ってアプリケーション構築を行います。
Next.js初心者でもこの技術スタックでアプリケーションのデプロイまでできます。

# Init

## create-next-app

`npx create-next-app --example with-tailwindcss with-tailwindcss-app`

これで以下のTailwind CSS Exampleから作成できます。

-  https://nextjs.org/docs/advanced-features/customizing-postcss-config
- https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

## Node12

現状、VercelはNode.js14には対応していないので、12にします。
ref. https://vercel.com/docs/runtimes

```package.json
"engines": {
  "node": "12.x"
},
```

## vercel.json

`vercel.json` でregionsを指定します。

```vercel.json
{
  "regions": ["hnd1"]
}
```

ref. https://vercel.com/docs/edge-network/regions

`AWS ap-northeast-1` 東京リージョンです。
AWSがメインで使われているようです。

## next.config.js

`next.config.js`を追加し、`serverless`にしておきます。

```next.config.js
module.exports = {
  target: 'serverless',
}
```

# TypeScriptを追加

## modify package.json

`yarn add --dev typescript @types/react @types/node`

このときの`@type`のpackageは以下で検索するとわかります。
https://www.typescriptlang.org/dt/search

![Screen Shot 2020-12-05 at 6.12.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/a5ff5769-04f6-7123-e9c2-eebf5071ddcd.png)


`tsconfig.json`などの必要なファイルも作成されていきます。

最終的には現状の最新バージョンに書き換えて以下のような`package.json`にしています。

```package.json
{
  "name": "next-tailwindcss",
  "version": "0.1.0",
  "engines": {
    "node": "12.x"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint:style": "stylelint **/*.css --ignore-path .gitignore"
  },
  "dependencies": {
    "next": "10.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@types/node": "^14.14.10",
    "@types/react": "^17.0.0",
    "postcss": "8.1.14",
    "stylelint": "^13.8.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "tailwindcss": "^2.0.1",
    "typescript": "^4.1.2"
  },
  "license": "MIT"
}
```

## yarn dev

```sh
yarn
yarn dev
```

開発環境を立ち上げます。
http://localhost:3000/

![Screen Shot 2020-12-05 at 6.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/e93d2dea-2ce8-c1ec-8c90-cdca90d6173d.png)


## ページを追加

`pages`以下にファイルを追加します。

```pages/test.tsx
import Nav from '../components/nav'

export default function TestPage () {
  return (
  <div>
    <Nav />
    <div>
      <h1 className="mt-4 text-3xl text-center text-purple-600">
        Hello
      </h1>
    </div>
  </div>
  )
}
```

tailwind cssを使うことで、最低限のcssの秩序を手に入れることができます。
サイトにアクセスして、`⌘K`でクラス名を検索したらわかります。
https://tailwindcss.com/


`nav.js` へリンクを追記しておきます。

```components/nav.js
import Link from 'next/link'

const links = [
  { href: 'https://github.com/vercel/next.js', label: 'GitHub' },
  { href: 'https://nextjs.org/docs', label: 'Docs' },
]

export default function Nav() {
  return (
    <nav>
      <ul className="flex items-center justify-between p-8">
        <li>
          <Link href="/">
            <a className="text-blue-500 no-underline text-accent-1 dark:text-blue-300">
              Home
            </a>
          </Link>
        </li>
        <li>
          <Link href="/test">
            <a className="text-blue-500 no-underline text-accent-1 dark:text-blue-300">
              Test
            </a>
          </Link>
        </li>
        <ul className="flex items-center justify-between space-x-4">
          {links.map(({ href, label }) => (
            <li key={`${href}${label}`}>
              <a href={href} className="no-underline btn-blue">
                {label}
              </a>
            </li>
          ))}
        </ul>
      </ul>
    </nav>
  )
}
```


# Deploy

コードをpushし、Vercelへログインし、Import Projectを行います。
あとはなにも考えなくてOKです。

![vercel-import_2020-12-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/058a96fc-7741-ef70-4ac0-7c8b02dc2fef.png)



![Screen Shot 2020-12-05 at 5.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/012bd11a-678b-3ce8-a39c-7ab8d42c3ab7.png)


ドメインの編集も簡単です。

![Screen Shot 2020-12-05 at 5.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/95b8f1e0-50d6-a619-0656-ee49a08a307f.png)


Lighthouseと連携してくれます。
https://nextjs.org/analytics

![Screen Shot 2020-12-05 at 5.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149838/4efb44d4-2019-ee2d-d31e-7073b1747971.png)


# 感想

VercelのUIはミニマルでわかりやすく、Next.js以外のホスティングも簡単にできそうです。
普段はNuxt.js(Vue)を使っていますが、Next.jsからインスパイアされていることも伝わってきました。
持っている機能については、キャッチアップしきれていないので、引き続き1つ1つ試して、Next.jsの力を活用していきたいです。
今後どうなるかわかりませんが、現状で新規の小さなアプリケーションを作るならこの技術スタックでやっていきたいと思っています。

# ref.
- https://nextjs.org/docs/getting-started
- https://tailwindcss.com
- https://github.com/DefinitelyTyped/DefinitelyTyped