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環境構築

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

プロジェクト作成

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

起動

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

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

Hello Worldしてみる

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

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

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