Next.js & Tailwind CSS入門

Next.jsの入門編をまとめてみました。

Next.jsはざっくりいうと、サーバーサイドで動作するReactJSです。
これを覚えればサーバーサイドも、フロントエンドもReactの感じで書けるようになりそうです。

こちらの公式ドキュメントを参考にしました。
https://nextjs.org/docs/

## React Projectの作成

まずはyarnでReactのプロジェクトを作成します。
プロジェクト名はデフォルトのmy-appにしました。

```
$ yarn create next-app
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-next-app@10.0.6" with binaries:
      - create-next-app
✔ What is your project named? … my-app
(node:15206) ExperimentalWarning: The fs.promises API is experimental
Creating a new Next.js app in /Users/araya/Repository/my-app.

Installing react, react-dom, and next using yarn...
...
...
...
```

## Nextのインストール
作成したプロジェクト内でyarnを利用してnextをインストールします。

```
$ cd my-app
$ yarn add next react react-dom
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 3 new dependencies.
info Direct dependencies
├─ next@10.0.6
├─ react-dom@17.0.1
└─ react@17.0.1
info All dependencies
├─ next@10.0.6
├─ react-dom@17.0.1
└─ react@17.0.1
✨  Done in 2.48s.
```


## 開発サーバーの起動

ひとまずこれで空のサイトが見られるようになります。
npxはnpmでインストールしたnode_module以下にインストールしたパッケージを利用するコマンドです。
開発サーバーのため**dev**としています。

```
$ npx next dev
```

ブラウザで、http://localhost:3000/にアクセスしてみます。

| <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74622/a78c46c2-f9a3-7240-b1a8-c976471e66e2.png" >|
|:--|

## Typescriptの導入
一度サーバーを止めてTypescriptを導入します。
tsconfig.jsonを作成しておけば、nextが自動で書き込んでくれます。

```
$ yarn add --dev typescript @types/react @types/node
$ touch tsconfig.json
$ npx next dev
```

## ページの作成
簡単なページを作成してみます。
Vimコマンドではなく、VSCodeなどでも大丈夫です。さっそくTypescript(.tsx)を使ってみます。

```
vim pages/about.tsx
```

about.tsxの内容は下記のようにします。

``` tsx:about.tsx
function About() {
  return <div>About</div>
}

export default About
```

about.tsxの保存後、再度サーバーを立ち上げるて、
http://localhost:3000/about
にアクセスするとシンプルにAboutと表示された、ページが表示されます。

```
$ npx next dev                                                                                                                          
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:16094) ExperimentalWarning: The fs.promises API is experimental
event - compiled successfully
event - build page: /about
wait  - compiling...
event - compiled successfully
```

| <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74622/bfccddca-f2e4-64b8-7190-a97d4d725630.png" >|
|:--|


## Tailwind CSSの導入
公式ドキュメントでお住めされているのでTailwind CSSを使ってみます。相性がいいのかな。

諸々インストールした後に、About.tsxに簡単なボタンを設置してみます。
ちなみにnodeのバージョンがv12以上ではないとエラーが出るようでした。

```
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

$ npx tailwindcss init -p # 設定ファイルの作成
```

その後順番にファイルを修正していきます。

```
$ vim tailwind.config.js
$ vim postcss.config.js
$ vim styles/globals.css
$ vim pages/about.tsx
```

```js:tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

```js:postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

```css:globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```tsx:about.tsx
function About() {
  return <div>
    About
    <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded select-none">
      Button
    </button>
  </div>
}

export default About
```


最後にサーバーを立ち上げ直すと、tailwindcssの見た目のボタンが表示されています。

```
$ npx next dev  
```


| <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74622/a917a979-2084-fb05-15d9-08306240de83.png" >|
|:--|