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

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

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

プロジェクト作成

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

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

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

起動

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

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

## 起動
sudo yarn dev

## プロジェクトに移動

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)
})

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