Next.jsによるフロントエンド開発ハンズオン

社内ハンズオン資料を転記

# レジュメ
- Todoist で進捗管理
- React.js で簡単な単一ページの作成してもらい、SPA を理解してもらう
- linter を入れて矯正ギブス オン
- now(SAAS) による外部公開サイトの作成方法を理解してもらう

# 事前準備
- todoist インストール（他管理ツールあればそちらでも可）
    - https://todoist.com/?lang=ja
    - テンプレ https://todoist.com/API/v8.1/import/project_from_url?t_url=https%3A%2F%2Fd1aspxi4rjqbaz.cloudfront.net%2F4e321582b4b00bcf9cd202246ade7bc3_SPA%2520hands-on.csv
- node インストール
  - `brew install nodebrew`
  - `brew install yarn --ignore-dependencies`

## nodebrew セットアップ
**※ インストール済みの人はスキップ**

### 環境変数追記

```bash:.bashrc
export NODEBREW_ROOT=$HOME/.nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

zshならこれ

```zsh:.zshrc
if [ -d "$HOME/.nodebrew" ] ; then
  export NODEBREW_ROOT=$HOME/.nodebrew
  export NODE_HOME="$NODEBREW_ROOT/current/bin"
  path=($NODE_HOME(N-/) $path)
fi
```

### nodeのインストール

```
% brew install nodebrew
% nodebrew setup
% nodebrew install-binary stable
% nodebrew use stable
% node -v
v12.1.0
% brew install yarn --ignore-dependencies
```


# ハンズオン
## todoistでプロジェクト作成

タスク作って管理してください！
思いついた作業があればどんどん追加してね

- nextjs-hands-on
  - node セットアップ
  - yarn インストール
  - リポジトリ作成
  - Next.jsのセットアップ
  - helloworld作成
  - nowへデプロイ

## リポジトリ用意
https://github.com/new

`nextjs-hands-on` とか好きな名前で作ってください

```bash
% git clone https://github.com/xxxxx/nextjs-hands-on
% cd next-js-hands-on
```

```text:.gitignore
node_modules
yarn-error.log
.next
```

# Next.jsのセットアップ
node.js 用の設定ファイル`package.json` を作ってください。

```json:package.json
{
  "name": "nextjs-hands-on",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}
```

作ったらパッケージインストール

```bash
% yarn add next react react-dom
```

立ち上がれば準備OK

```bash
% yarn dev
```

# ページ作成
下記ファイルを作ってアクセスできれば、セットアップ完了
http://localhost:3000/

```bash
% mkdir -p pages
```

```javascript:pages/index.js
import Link from 'next/link'

const Home = () => {
  return <div>
    <div>Welcome to Next.js!</div>
    <Link href='/about'><a>about</a></Link>
  </div>
}

export default Home
```

```javascript:pages/about.js
import Link from 'next/link'

export default () => {
  return <>
    <div>about page</div>
    <Link href='/'><a>Home</a></Link>
  </>
}
```

# linter セットアップ

## standard
JavaScript Standard Styleを利用したいと思います
https://standardjs.com/readme-ja.html

```bash
% yarn add -D standard
```

```json:package.json
{
  "scripts": {
    "lint": "standard",
    "lint:fix": "standard --fix",
  }
}
```

`page/index.js` のタブとか崩してから、`yarn lint`, `yarn lint:fix` してみよう

## prettier
整形ツールprettierをいれよう

```
yarn add -D prettier 
```

```json:.prettierrc.json
{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5"
}
```

```json:package.json
{
  "scripts": {
    "prettier": "prettier --write \"**/*.{js,jsx,json,md,mdx,css,html,yml,yaml,scss,sass}\" && yarn lint-fix",
  }
}
```

# nowでデプロイ
## デプロイ用CLIをインストール

```
% npm i -g now
```

## now用の設定ファイル
```js:next.config.js
module.exports = {
  target: 'serverless'
}
```

```json:now.json
{
  "version": 2,
  "name": "next-js-hands-on",
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

```

startコマンド修正

```json:package.json
  "scripts": {
    "build": "next build",
    "start": "next"
```

## ログイン＆デプロイ
```bash
% now login # メール認証実行後
% now # デプロイ開始

> Deploying ~/src/github.com/XXXXX/nextjs-hands-on under xxxxxxxxxxxxx
> Using project next-js-hands-on
> Synced 2 files (314B) [920ms]
> https://next-js-hands-on-c942xp5e4.now.sh [v2] [1s]
┌ next.config.js        Ready               [28s]
├── λ _error (85.54KB) [hnd1]
├── λ about (87.54KB) [hnd1]
├── λ index (87.58KB) [hnd1]
├── _next/static/coNPEuflo9lqvZoyFtoIa/pages/_app.js (2.43KB)
├── _next/static/coNPEuflo9lqvZoyFtoIa/pages/_error.js (7.73KB)
└── 5 output items hidden
> Ready! Aliased to https://next-js-hands-on.xxxxxxxx.now.sh [in clipboard] [33s]
```

### 参考資料
- Documentation - Getting Started | Next.js - https://nextjs.org/docs
- JavaScript Standard Styleのススメ - Qiita - https://qiita.com/munieru_jp/items/ca16cbfa859468137d2e#packagejson%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90
- Now by Example - Next.js - ZEIT - https://zeit.co/examples/nextjs/
- next.js/examples https://github.com/zeit/next.js/tree/canary/examples