Ubuntu19.10 Next.jsを使ってHello Worldしてみる

Ubuntu19.10 Next.jsを使ってHello Worldしてみる

React上のフレームワークであるNext.jsの環境を構築してHello Worldしてみる

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1

※ubuntu19.10にnodeのインストールはこちら

Next.js環境構築

任意のディレクトリで下記のコマンドを実行して、インストールします。

## ローカルインストール
npm i -D create-next-app

プロジェクト作成

下記のコマンドを実行してプロジェクトを作成します。今回はtest-proという名前で作成します

## プロジェクト作成
sudo npx create-next-app -example api-routes-micro test-pro

起動

とりあえず、起動してみる

## プロジェクトに移動
cd test-pro

## 起動
sudo yarn dev

ブラウザよりhttp://localhost:3000にアクセスしてみると下図が表示されます。

Hello Worldしてみる

test-pro/pages/api内のposts.jsを下記のように編集します

import micro from 'micro'

const posts = [
  {
    title: 'Hello',
  },
  {
    title: 'World',
  },
]

export default micro((req, res) => {
  res.status(200).json(posts)
})

htmlだけですが、test-pro/pages内のindex.jsも少しだけ編集します。

import fetch from 'isomorphic-unfetch'

const Index = ({ posts }) => (
  <div>
    {posts.map((post, i) => (
      <p key={i}>{post.title}</p>
    ))}
  </div>
)

Index.getInitialProps = async () => {
  const response = await fetch('http://localhost:3000/api/posts')
  const posts = await response.json()

  return { posts }
}

export default Index

ラウザよりhttp://localhost:3000にアクセスしてみると下図が表示されます