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

作成日 2019.12.23
更新日 2020.07.21
Next.js ubuntu
Next.js, ubuntu19.10

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

1. 環境
2. Next.js環境構築
3. プロジェクト作成
4. 起動
5. 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にアクセスしてみると下図が表示されます