スポンサーリンク

Next.jsでHello Worldやってみた | Go/RevelとAPI連携

はじめに

バックエンドをRevel(Go), フロント側をNext.jsという構成でアプリをWebアプリを作ってみたい思い、
前回はGo/RevelでHello Worldやってみた という記事を書いたんですが、
今回はフロントエンド側のNext.jsをやっていきたいと思います。
そもそも、Next.jsってなんだよって人もいらっしゃるかと思うので、簡単に説明しておくと、ReactやWebpackで構築されたサーバサイドレンダリング(SSR)できるフレームワークです。

環境情報

npmが使えるものとします。

$ npm -v
6.9.0

インストール

npxを使えば最低限必要な一式が揃った状態でプロジェクトを作成することができます。

npx create-next-app

インストールが始ると、プロジェクト名を入力するように求められるので入力しましょう。

✔ What is your project named? … next-sample-app

プロジェクトが作成できたら、OKです。

作成

起動確認

それでは、作成されたプロジェクトを起動してみます。

cd next-sample-app
npm run dev

以下のログが出て、アクセス可能な状態になったら

[ ready ] compiled successfully - ready on http://localhost:3000

http://localhost:3000 を開いてみましょう。

Welcome to Next.js! と書かれたページが確認できましたね。

Hello World

それでは、http://localhost:3000/hello にアクセスするとHello World を表示できるように修正してみましょう。

ページを追加するには pagesディレクト配下にjsファイルを作成します。

pages/hello.jsを以下のように作成してみましょう。

import React from 'react'

const Hello = () => (
  <h1> Hello World </h1>
);

export default Hello;

作成できたら、http://localhost:3000/hello を開いてみましょう。
Hello World が表示できたこと確認できました。

APIを呼び出して表示する

前回のGo/Revelで作成したhello worldをJSONで返すAPIを呼んで、Next.js側に表示させたいと思います。
エンドポイントとJSONの構造は以下のようになっております。

$ curl http://localhost:9000/helloworld/json
{
  "message": "Hello World"
}

まずは、isomorphic-unfetchというパッケージをインストールします。

npm install --save isomorphic-unfetch

インストールが完了したらhello.jsを以下のように修正します。
APIのURLは各自修正してください。

import React from 'react'
import fetch from 'isomorphic-unfetch';

const Index = props => (
    <h1>{props.message}</h1>
);

Index.getInitialProps = async function() {
  const res = await fetch('http://localhost:53373/helloworld/json');
  return await res.json();
};

export default Index;

getInitialPropsの中でfetchしてきたデータをpropsとして描画に利用できるよになります。

実装していてfetchのところでエラーがでてつまづいたことがあったので共有します。

APIのURLを http://localhost:9000/helloworld/json としていたら以下のようなエラーが発生しました。

request to http://localhost:9000/helloworld/json failed, reason: read ECONNRESET
FetchError: request to http://localhost:9000/helloworld/json failed, reason: read ECONNRESET
    at ClientRequest.<anonymous> (/Users/xxxx/work/next-sample-app/node_modules/node-fetch/lib/index.js:1455:11)
    at ClientRequest.emit (events.js:196:13)
    at Socket.socketErrorListener (_http_client.js:402:9)
    at Socket.emit (events.js:196:13)
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:17)

Go/Revelで作ったAPIは利用できるポート番号が2つあってサーバを起動したときに以下のようにログが出ています。

Revel engine is listening on.. localhost:53373
Revel proxy is listening, point your browser to : 9000

9000番ポートがプロキシになっていて、実際のRevel Engineは上記の場合は53373番ポートとなっています。プロキシの9000番ポートは何度起動しなおしでも変わりませんが、Revel EngineがListenしているポートは毎回変わってしまいます。

ここで発生したエラーは9000番ポートではなく、Revel EngineがListenしているポートを使うことで回避できました。

プロキシを使う方法は追って調査いたします。

上記の方法でエラーが解決したら http://localhost:3000/hello を開くとHello World が表示できていることが確認できたと思います。

まとめ

サーバサイドとフロントを切り分けて、Revel(Go)とNext.js(React)を連携させてHello Worldを出力することができました。

Go, React ともに知識がまだまだなので身につけてイケてるアプリができるようにがんばります。

コメント

タイトルとURLをコピーしました