Ubuntu　Next.jsを使ってHello Worldする方法

2024年6月3日

環境
node v12.13.0
Ubuntu24.04

操作方法
1.任意のディレクトリで下記のコマンドを実行して、インストールします。
npm i -D create-next-app

2.下記のコマンドを実行してプロジェクトを作成します。今回はtestproという名前で作成します
## プロジェクト作成
sudo npx create-next-app -example api-routes-micro testpro

3.起動
## プロジェクトに移動
cd testpro

## 起動
sudo yarn dev

確認
ブラウザよりhttp://localhost:3000にアクセスします。

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

import micro from 'micro'

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

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

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