## 概要
function式とarrow式の違いをサッカー選手を使いながら軽く説明するよ


## 問題
早速、問題を出します。
aとbの違いわかりますか？

```javascript
const a = function() {
  console.log('neymar')
}

const b = () => {
  console.log('neymar')
}
```
この場合だとbのほうが合計文字数がすくなくなったくらいですかね。

次

```javascript
// let, const であればトップレベルで宣言してもwindowオブジェクトのプロパティを生成しませんが今回は問題の都合上varでいきます
// よほどのことがない限りこんな書き方をしないけどグローバルのnameに代入するために記載
// var宣言が怖い理由の一つもこれですね。

var name = '😈😈global-messhi😈😈'

const printName = function() {
  console.log('printName', this.name)
}

const arrowPrintName = () => {
  console.log('arrowPrintName', this.name)
}

const obj1 = {
  name: 'nagatomo',
  printName
}

const obj2 = {
  name: 'king-kazu',
  arrowPrintName
}

// 出力される名前はなんでしょう
obj1.printName()
obj2.arrowPrintName()
```

<details>
<summary>答え</summary>
<div>

```javascript
obj1.printName() // nagatomo
obj2.arrowPrintName() // 😈😈global-messhi😈😈
```
</div>
</details>

## アロー関数式とfunction式の違い
先程の問題の結果を見て、文字数が短くなっただけではないことはすでにわかったと思います。

`this`の指している場所が違います。

通常のfunction式の中でthisを使うと、その呼び出し元のオブジェクトを指します。

```javascript
var name = '😈😈global-messhi😈😈'

const printName = function() {
  console.log('printName', this.name)
}

const obj1 = {
  name: 'nagatomo',
  printName
}

const obj2 = {
  name: 'king-kazu',
  printName
}

obj1.printName() // 'nagatomo'
obj2.printName() // 'king-kazu'
```

なのでこの場合printName関数内で使っている`this.name`の値は呼び出し元がobj1とobj2なのかで値が異なってきます。
function式だとthisが呼ばれたタイミングで決定されちゃんと自立できていない人のような振る舞いです。
なのでfunction式は直感でわかりにくいので苦労します。

アロー関数は結論から言うと`this`は宣言された時点で、`this`を確定します。

```javascript
var name = '😈😈global-messhi😈😈'

const arrowPrintName = () => {
  console.log('arrowPrintName', this.name)  // この時点でのthisはグローバルになる
}

const obj1 = {
  name: 'nagatomo',
  arrowPrintName
}

const obj2 = {
  name: 'king-kazu',
  arrowPrintName
}

obj1.arrowPrintName() // '😈😈global-messhi😈😈'
obj2.arrowPrintName() // '😈😈global-messhi😈😈'
```

なので、呼び出し元がobj1だろうが、obj2だろうが、関係なくて直感的にthisの指している場所がわかります。

今学んだことを再確認するために、もっかい問題出します。

```javascript

class Person {
  constructor(name) {
    this.name = name
  }
  printName = function () {console.log('printName', this.name)}
  arrowPrintName = () => {console.log('arrowPrintName', this.name)}
}

const printName = function() {
  console.log('printName', this.name)
}

const arrowPrintName = () => {
  console.log('arrowPrintName', this.name)
}

class Person2 {
  constructor(name) {
      this.name = name
  }
  printName = printName
  arrowPrintName = arrowPrintName
}


const kakitani = new Person('kakitani')
const maezono = new Person2('maezono')

// 出力される名前はなんでしょう
kakitani.printName() 
kakitani.arrowPrintName()
maezono.printName()
maezono.arrowPrintName()
```

<details>
<summary>答え</summary>
<div>

```javascript
kakitani.printName()  // kakitani
kakitani.arrowPrintName() // kakitani
maezono.printName() // maezono
maezono.arrowPrintName() // 😈😈global-messhi😈😈
```
</div>
</details>

次

```javascript
const bindPrintName = function() {
  console.log(this.name)
}.bind(this) // function式をarrow関数と同じ感じでthisをつかえるようにするための魔法のコトバだよ

class Person3 {
  constructor(name) {
    this.name = name
  }
  bindPrintName = bindPrintName
}

// 出力される名前はなんでしょう
const zaccheroni = new Person3('zaccheroni')
zaccheroni.bindPrintName()
```

<details>
<summary>答え</summary>
<div>

```javascript
const zaccheroni = new Person3('zaccheroni')
zaccheroni.bindPrintName() // 😈😈global-messhi😈😈
```

</div>
</details>


## Reactでよくあるパターン
これだとボタンを押した時``Uncaught TypeError: Cannot read property 'state' of undefined``が出ます。
理由わかりますか？

```jsx
export default class Hoge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zico'
    };
  }

  handlePrintName() {
    const { name } = this.state;
    return name
  }

  render() {
    const { name } = this.state;

    return (
      <button onClick={this.handlePrintName}>
        print name
      </button>
    );
  }
}
```

### 解決方法
`handlePrintName()`をアロー関数にする

```javascript
  // 変更前
  handlePrintName() { // これでthisが定まっていない
    const { name } = this.state;  
    return name
  }
  // 変更後
  handlePrintName = () => { // これでthisをHogeにbind
    const { name } = this.state;  
    return name
  }
```

ただReactの場合これには問題点があります。

レンダー内でアロー関数を利用するとコンポーネントがレンダーされるたびに新しい関数が作成されるため、子コンポーネントでReact.memoやPureComponentを使ってた場合に正しく比較されなくなる

ClassComponentでは`bind(this)`を使う場合が多い

```jsx

export default class Hoge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zico'
    };
  this.handlePrintName  = this.handlePrintName.bind(this)
  }

  handlePrintName() {
    const { name } = this.state;
    return name
  }

  render() {
    const { name } = this.state;

    return (
      <button onClick={this.handlePrintName}>
        print name
      </button>
    );
  }
}
```

## 参考記事
[JavaScriptの「this」は「4種類」？？](https://qiita.com/takeharu/items/9935ce476a17d6258e27)
[JavaScript の this を理解する多分一番分かりやすい説明](https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)


function式とarrow式の違いをサッカー選手を呼び出しながら説明するよ

yuma watanabe

## やること
envファイルをNext.jsで使えるようにする。

### 必要パッケージインストール
dotenvをインストール

```
yarn add dotenv
```

### .env作成

```
TEST = HOGEHOGE
```

### next.config.js作成

```next.config.js
require('dotenv').config()

module.exports = {
  env: {
    TEST: process.env.TEST,
  },
}
```

### 読み込む

```pages/index.js
export default () => <p>process.env.TEST:{process.env.TEST}</p>
```

<img width="479" alt="スクリーンショット 2019-12-17 23.40.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/6207e88d-4906-7426-e45e-2fbe078acae9.png">



## おわり
Next.jsの記事が少ないと感じているので、ちょっとしたことでも投稿していこうと思った。



<h2>
<span id="やること" class="fragment"></span><a href="#%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8"><i class="fa fa-link"></i></a>やること</h2>

<p>envファイルをNext.jsで使えるようにする。</p>

<h3>
<span id="必要パッケージインストール" class="fragment"></span><a href="#%E5%BF%85%E8%A6%81%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB"><i class="fa fa-link"></i></a>必要パッケージインストール</h3>

<p>dotenvをインストール</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>yarn add dotenv
</code></pre></div></div>

<h3>
<span id="env作成" class="fragment"></span><a href="#env%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>.env作成</h3>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>TEST = HOGEHOGE
</code></pre></div></div>

<h3>
<span id="nextconfigjs作成" class="fragment"></span><a href="#nextconfigjs%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>next.config.js作成</h3>

<div class="code-frame" data-lang="javascript">
<div class="code-lang"><span class="bold">next.config.js</span></div>
<div class="highlight"><pre class="with-code"><code><span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dotenv</span><span class="dl">'</span><span class="p">).</span><span class="nx">config</span><span class="p">()</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">env</span><span class="p">:</span> <span class="p">{</span>
    <span class="na">TEST</span><span class="p">:</span> <span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">TEST</span><span class="p">,</span>
  <span class="p">},</span>
<span class="p">}</span>
</code></pre></div>
</div>

<h3>
<span id="読み込む" class="fragment"></span><a href="#%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80"><i class="fa fa-link"></i></a>読み込む</h3>

<div class="code-frame" data-lang="javascript">
<div class="code-lang"><span class="bold">pages/index.js</span></div>
<div class="highlight"><pre class="with-code"><code><span class="k">export</span> <span class="k">default</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">TEST</span><span class="p">:{</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">TEST</span><span class="p">}</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;
</span></code></pre></div>
</div>

<p><a href="https://camo.qiitausercontent.com/d68c8d3f6b978162e6c57ec7b3e32451f7c59c72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3533333539332f36323037653838642d343930362d373432362d653435652d3266626530373861636165392e706e67" target="_blank" rel="nofollow noopener"><img width="479" alt="スクリーンショット 2019-12-17 23.40.53.png" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2F6207e88d-4906-7426-e45e-2fbe078acae9.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=27fb59a45848d84285327cd28ea1d4fa" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/6207e88d-4906-7426-e45e-2fbe078acae9.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2F6207e88d-4906-7426-e45e-2fbe078acae9.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=991ed4cbba914f674b9fdd06280d4b60 1x" loading="lazy"></a></p>

<h2>
<span id="おわり" class="fragment"></span><a href="#%E3%81%8A%E3%82%8F%E3%82%8A"><i class="fa fa-link"></i></a>おわり</h2>

<p>Next.jsの記事が少ないと感じているので、ちょっとしたことでも投稿していこうと思った。</p>


Next.jsでenvファイルを使う

## 概要
Next.js + Now + Typescriptで爆速デプロイ💣

## 目次
- Next.jsとはなにか
    - なにがいいの？
- Nowとはなにか
    - なにがいいの？
- 実装
    - Next.js + Typescript環境作成
    - Nowでデプロイ

## Next.jsとはなにか
以下[公式ドキュメント](https://nextjs.org/)翻訳
### Server Rendering
Next.jsを使用すると、Reactアプリケーションのサーバーレンダリングが、データの送信元に関係なく、かつてないほど簡単になります。

### Static Exporting
新しいフレームワークを学ぶ必要はありません。Next.jsを使用した静的サイトのエクスポートは、1つのコマンドと同じくらい簡単です。

### CSS-in-JS
Next.jsには付属してstyled-jsxいますが、ご存知のすべてのCSS-in-JSソリューションでも動作します。

### Zero Setup
自動コード分割、ファイルシステムベースのルーティング、ホットコードの再読み込み、ユニバーサルレンダリング。

### Fully Extensible
BabelとWebpackを完全に制御します。カスタマイズ可能なサーバー、ルーティング、および次のプラグイン。

### Ready for Production
より小さいビルドサイズ、開発のコンパイルの高速化、その他多数の改善のために最適化されています。

## Next.jsなにがいいの？
### 直感的なページベースのルーティングシステム（動的ルートのサポート付き)
pages配下の構成がアプリのURL構成になる
`pages/index.js` => `/`
`pages/about.js` => `/about`

### デフォルトでSSRしてくれる
ReactでSSRしようとすると結構めんどくさいのをデフォルトでやってくれるので楽チン

### ページの読み込みを高速化する自動コード分割
コード分割も自動でやってくれる

基本的に何も気にしなくても使うだけで最適化してくれるのが嬉しい。

### サンプルが豊富
guthubの[example](https://github.com/zeit/next.js/tree/canary/examples)を見ればだいたいやりたい構成が載っている。

## Nowとはなにか
[公式ドキュメント](https://zeit.co/docs)の翻訳

ZEIT Nowは、静的サイトおよびサーバーレス機能向けのクラウドプラットフォームです。これにより、開発者は、即座にデプロイし、自動的にスケーリングし、監視を必要とせず、すべて設定なしで WebサイトとWebサービスをホストできます。

Nowの使用開始はほんの数ステップで、1分もかからずに新しいプロジェクトを開始して実行できます。
### なにがいいの？
シンプル且つ高速にデプロイを実現

## 実装
### Next.js + Typescript環境作成
プロジェクト作成

```
mkdir next-ts
cd next-ts
yarn init -y
yarn add react react-dom next
mkdir pages
```

次に`@types`を追加

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

次に`package.json`に`scripts`を追加

```
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

`pages`配下に`index.tsx`を追加

```pages/index.tsx
const Home = () => <h1>Hello world!</h1>;
export default Home;
```

これで準備完了です。
次のコマンドを実行して、devサーバーを起動します。

```
yarn dev
```

`http://localhost:3000`にアクセスします。
<img width="552" alt="スクリーンショット 2019-12-16 22.05.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/0b6948a3-d7a7-25fa-0049-e8fcbae9f6d3.png">



これだけでnext + typescriptの環境は完成です。

## Nowでデプロイ
[Now](https://zeit.co/signup)でアカウント作成

Now CLIをインストール

```
npm i -g now
```

次のコマンドを使用してログインします。

```
now login
```

デプロイ

```
now
```

これでデプロイ完了です
[Hello world](https://next-ts-39r52fv3z.now.sh/)

## おまけ
Next.jsでググってるのになぜかNuxt.jsの概要が出てくるのが悲しいなといつも思う
<img width="1289" alt="スクリーンショット 2019-12-16 21.22.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/b819a0ee-6f33-fdf8-5d27-51d228ad4040.png">



<h2>
<span id="概要" class="fragment"></span><a href="#%E6%A6%82%E8%A6%81"><i class="fa fa-link"></i></a>概要</h2>

<p>Next.js + Now + Typescriptで爆速デプロイ💣</p>

<h2>
<span id="目次" class="fragment"></span><a href="#%E7%9B%AE%E6%AC%A1"><i class="fa fa-link"></i></a>目次</h2>

<ul>
<li>Next.jsとはなにか

<ul>
<li>なにがいいの？</li>
</ul>
</li>
<li>Nowとはなにか

<ul>
<li>なにがいいの？</li>
</ul>
</li>
<li>実装

<ul>
<li>Next.js + Typescript環境作成</li>
<li>Nowでデプロイ</li>
</ul>
</li>
</ul>

<h2>
<span id="nextjsとはなにか" class="fragment"></span><a href="#nextjs%E3%81%A8%E3%81%AF%E3%81%AA%E3%81%AB%E3%81%8B"><i class="fa fa-link"></i></a>Next.jsとはなにか</h2>

<p>以下<a href="https://nextjs.org/" rel="nofollow noopener" target="_blank">公式ドキュメント</a>翻訳</p>

<h3>
<span id="server-rendering" class="fragment"></span><a href="#server-rendering"><i class="fa fa-link"></i></a>Server Rendering</h3>

<p>Next.jsを使用すると、Reactアプリケーションのサーバーレンダリングが、データの送信元に関係なく、かつてないほど簡単になります。</p>

<h3>
<span id="static-exporting" class="fragment"></span><a href="#static-exporting"><i class="fa fa-link"></i></a>Static Exporting</h3>

<p>新しいフレームワークを学ぶ必要はありません。Next.jsを使用した静的サイトのエクスポートは、1つのコマンドと同じくらい簡単です。</p>

<h3>
<span id="css-in-js" class="fragment"></span><a href="#css-in-js"><i class="fa fa-link"></i></a>CSS-in-JS</h3>

<p>Next.jsには付属してstyled-jsxいますが、ご存知のすべてのCSS-in-JSソリューションでも動作します。</p>

<h3>
<span id="zero-setup" class="fragment"></span><a href="#zero-setup"><i class="fa fa-link"></i></a>Zero Setup</h3>

<p>自動コード分割、ファイルシステムベースのルーティング、ホットコードの再読み込み、ユニバーサルレンダリング。</p>

<h3>
<span id="fully-extensible" class="fragment"></span><a href="#fully-extensible"><i class="fa fa-link"></i></a>Fully Extensible</h3>

<p>BabelとWebpackを完全に制御します。カスタマイズ可能なサーバー、ルーティング、および次のプラグイン。</p>

<h3>
<span id="ready-for-production" class="fragment"></span><a href="#ready-for-production"><i class="fa fa-link"></i></a>Ready for Production</h3>

<p>より小さいビルドサイズ、開発のコンパイルの高速化、その他多数の改善のために最適化されています。</p>

<h2>
<span id="nextjsなにがいいの" class="fragment"></span><a href="#nextjs%E3%81%AA%E3%81%AB%E3%81%8C%E3%81%84%E3%81%84%E3%81%AE"><i class="fa fa-link"></i></a>Next.jsなにがいいの？</h2>

<h3>
<span id="直感的なページベースのルーティングシステム動的ルートのサポート付き" class="fragment"></span><a href="#%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E5%8B%95%E7%9A%84%E3%83%AB%E3%83%BC%E3%83%88%E3%81%AE%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E4%BB%98%E3%81%8D"><i class="fa fa-link"></i></a>直感的なページベースのルーティングシステム（動的ルートのサポート付き)</h3>

<p>pages配下の構成がアプリのURL構成になる<br>
<code>pages/index.js</code> =&gt; <code>/</code><br>
<code>pages/about.js</code> =&gt; <code>/about</code></p>

<h3>
<span id="デフォルトでssrしてくれる" class="fragment"></span><a href="#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%A7ssr%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B"><i class="fa fa-link"></i></a>デフォルトでSSRしてくれる</h3>

<p>ReactでSSRしようとすると結構めんどくさいのをデフォルトでやってくれるので楽チン</p>

<h3>
<span id="ページの読み込みを高速化する自動コード分割" class="fragment"></span><a href="#%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%82%92%E9%AB%98%E9%80%9F%E5%8C%96%E3%81%99%E3%82%8B%E8%87%AA%E5%8B%95%E3%82%B3%E3%83%BC%E3%83%89%E5%88%86%E5%89%B2"><i class="fa fa-link"></i></a>ページの読み込みを高速化する自動コード分割</h3>

<p>コード分割も自動でやってくれる</p>

<p>基本的に何も気にしなくても使うだけで最適化してくれるのが嬉しい。</p>

<h3>
<span id="サンプルが豊富" class="fragment"></span><a href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%8C%E8%B1%8A%E5%AF%8C"><i class="fa fa-link"></i></a>サンプルが豊富</h3>

<p>guthubの<a href="https://github.com/zeit/next.js/tree/canary/examples" rel="nofollow noopener" target="_blank">example</a>を見ればだいたいやりたい構成が載っている。</p>

<h2>
<span id="nowとはなにか" class="fragment"></span><a href="#now%E3%81%A8%E3%81%AF%E3%81%AA%E3%81%AB%E3%81%8B"><i class="fa fa-link"></i></a>Nowとはなにか</h2>

<p><a href="https://zeit.co/docs" rel="nofollow noopener" target="_blank">公式ドキュメント</a>の翻訳</p>

<p>ZEIT Nowは、静的サイトおよびサーバーレス機能向けのクラウドプラットフォームです。これにより、開発者は、即座にデプロイし、自動的にスケーリングし、監視を必要とせず、すべて設定なしで WebサイトとWebサービスをホストできます。</p>

<p>Nowの使用開始はほんの数ステップで、1分もかからずに新しいプロジェクトを開始して実行できます。</p>

<h3>
<span id="なにがいいの" class="fragment"></span><a href="#%E3%81%AA%E3%81%AB%E3%81%8C%E3%81%84%E3%81%84%E3%81%AE"><i class="fa fa-link"></i></a>なにがいいの？</h3>

<p>シンプル且つ高速にデプロイを実現</p>

<h2>
<span id="実装" class="fragment"></span><a href="#%E5%AE%9F%E8%A3%85"><i class="fa fa-link"></i></a>実装</h2>

<h3>
<span id="nextjs--typescript環境作成" class="fragment"></span><a href="#nextjs--typescript%E7%92%B0%E5%A2%83%E4%BD%9C%E6%88%90"><i class="fa fa-link"></i></a>Next.js + Typescript環境作成</h3>

<p>プロジェクト作成</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>mkdir next-ts
cd next-ts
yarn init -y
yarn add react react-dom next
mkdir pages
</code></pre></div></div>

<p>次に<code>@types</code>を追加</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>yarn add -D typescript @types/react @types/node
</code></pre></div></div>

<p>次に<code>package.json</code>に<code>scripts</code>を追加</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
</code></pre></div></div>

<p><code>pages</code>配下に<code>index.tsx</code>を追加</p>

<div class="code-frame" data-lang="typescript">
<div class="code-lang"><span class="bold">pages/index.tsx</span></div>
<div class="highlight"><pre class="with-code"><code><span class="kd">const</span> <span class="nx">Home</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">world</span><span class="o">!&lt;</span><span class="sr">/h1&gt;</span><span class="err">;
</span><span class="k">export</span> <span class="k">default</span> <span class="nx">Home</span><span class="p">;</span>
</code></pre></div>
</div>

<p>これで準備完了です。<br>
次のコマンドを実行して、devサーバーを起動します。</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>yarn dev
</code></pre></div></div>

<p><code>http://localhost:3000</code>にアクセスします。<br>
<a href="https://camo.qiitausercontent.com/337a17c3444a05a1eefd1ce8dea30065551e0823/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3533333539332f30623639343861332d643761372d323566612d303034392d6538666362616539663664332e706e67" target="_blank" rel="nofollow noopener"><img width="552" alt="スクリーンショット 2019-12-16 22.05.44.png" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2F0b6948a3-d7a7-25fa-0049-e8fcbae9f6d3.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=9eb5dbc8bd250b72e2a56c4e1693c76c" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/0b6948a3-d7a7-25fa-0049-e8fcbae9f6d3.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2F0b6948a3-d7a7-25fa-0049-e8fcbae9f6d3.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=eae14978699e9050d0698f8f928251d8 1x" loading="lazy"></a></p>

<p>これだけでnext + typescriptの環境は完成です。</p>

<h2>
<span id="nowでデプロイ" class="fragment"></span><a href="#now%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4"><i class="fa fa-link"></i></a>Nowでデプロイ</h2>

<p><a href="https://zeit.co/signup" rel="nofollow noopener" target="_blank">Now</a>でアカウント作成</p>

<p>Now CLIをインストール</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>npm i -g now
</code></pre></div></div>

<p>次のコマンドを使用してログインします。</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>now login
</code></pre></div></div>

<p>デプロイ</p>

<div class="code-frame" data-lang="text"><div class="highlight"><pre class="with-code"><code>now
</code></pre></div></div>

<p>これでデプロイ完了です<br>
<a href="https://next-ts-39r52fv3z.now.sh/" rel="nofollow noopener" target="_blank">Hello world</a></p>

<h2>
<span id="おまけ" class="fragment"></span><a href="#%E3%81%8A%E3%81%BE%E3%81%91"><i class="fa fa-link"></i></a>おまけ</h2>

<p>Next.jsでググってるのになぜかNuxt.jsの概要が出てくるのが悲しいなといつも思う<br>
<a href="https://camo.qiitausercontent.com/b1fb106dc396a6cdbe534165eeda9acd8ef742d1/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3533333539332f62383139613065652d366633332d666466382d356432372d3531643232386164343034302e706e67" target="_blank" rel="nofollow noopener"><img width="1289" alt="スクリーンショット 2019-12-16 21.22.45.png" src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2Fb819a0ee-6f33-fdf8-5d27-51d228ad4040.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=36e3896b2486f9a368b298cebdf4a2ee" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533593/b819a0ee-6f33-fdf8-5d27-51d228ad4040.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F533593%2Fb819a0ee-6f33-fdf8-5d27-51d228ad4040.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=965357792317c5b0e3eacbcb2384151f 1x" loading="lazy"></a></p>


Qiita

Hatena Blog