next.js
Pocket

Next.jsをちょっとやってみました。

Next.jsを開発しているZEITのロゴとこのブログのロゴがモロ被りなため、やっておかないといけないなと思い導入だけやりました。

Next.jsはReactにプラスして、ルーターやSSRなどいろいろ設定がめんどいところをまるっとやってくれてるものって認識でいいのかな。まだ掴めてない感ありますが、ざっくりやってみた記録です。

Reactの環境を整えるのが面倒な人は使ってみるといいと思いました。

参考サイト

Next.js

@nkzawa Qiita

react-hands-on(FRONTEND CONFERENCE 2017ハンズオン資料)

@fand GitHub

導入

とりあえずpackage.jsonを作る

npm init -y

そして、Next.jsをインストールします。

npm install next --save

package.jsonのscriptに以下を書いておきます。

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    // ここ追記
    "dev": "next"
  },
  "dependencies": {
    "next": "^1.2.3"
  }
}

ページを作る

Next.jsはpageディレクトリを作って、その下にファイルを作っていくと、そのフォルダ構成がそのままルーティングとして扱われます。

pages/index.jsとpages/about.jsを作ります。

適当にそれぞれコードを書きます。

pages/index.js

import React from 'react'

export default () => (
  <div>
    <h2>Index</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus erat at tristique iaculis. Curabitur vitae erat finibus, sodales nulla vitae, consequat mauris. Fusce fermentum venenatis sem, ac maximus lacus rutrum eget. Cras fermentum mollis odio sit amet iaculis. Phasellus condimentum faucibus lorem sed rutrum. Donec pulvinar et tellus id venenatis. Nullam vel odio vitae massa condimentum ullamcorper at vitae enim. Aenean facilisis arcu nec felis tincidunt, ornare rutrum lectus tincidunt. Sed purus urna, dapibus eu auctor a, lacinia eget mauris. Donec magna diam, egestas varius facilisis vel, commodo in leo.
    </p>
  </div>
)

pages/about.js

import React from 'react'

export default () => (
  <div>
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus erat at tristique iaculis. Curabitur vitae erat finibus, sodales nulla vitae, consequat mauris. Fusce fermentum venenatis sem, ac maximus lacus rutrum eget. Cras fermentum mollis odio sit amet iaculis. Phasellus condimentum faucibus lorem sed rutrum. Donec pulvinar et tellus id venenatis. Nullam vel odio vitae massa condimentum ullamcorper at vitae enim. Aenean facilisis arcu nec felis tincidunt, ornare rutrum lectus tincidunt. Sed purus urna, dapibus eu auctor a, lacinia eget mauris. Donec magna diam, egestas varius facilisis vel, commodo in leo.
    </p>
  </div>
)

そして、以下のコマンドでサーバーを起動させます。

npm run dev

以下にアクセスすると、それぞれのページが表示されると思います。

localhost:3000/
localhost:3000/about

簡単にページができました。

あとは、共通部分をつくったり、APIから情報とってきたりも簡単にできます。詳しくは冒頭で挙げた参考サイトをみると分かるかと思います。

このブログでも、また続きを書いていこうと思います。

Pocket