Getting Started with Next.js

Elasticsearchと絡めて何か作れないかと思ったのと、最新のJavascript Frameworkについていけてないのでお試して調べて見たメモ。

環境

例によってDocker Composeで。

version: '3'
services:
  node:
    image: node:14.6.0-buster
    environment:
      - TZ=Asia/Tokyo

Dockerを起動する。今回はお試しなのでRunコマンドで。

docker-compose run --rm -p 3000:3000 node bash

セットアップ

こちらに沿って行う。

yarn create next-app

...
? What is your project named? › my-app # なんでもOK。今回はそのままmy-app

# 少し時間が経過して以下のように出力されればOK
...
Success! Created my-app at /my-app
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-app
  yarn dev

Done in 47.25s.

とりあえず、開発中はyarn devで良さそう。

my-appは以下の構成になっている。

.
|-- README.md
|-- node_modules
|-- package.json
|-- pages
|-- public
|-- styles
`-- yarn.lock

この中でpagesがルーティングに関連しているらしい。

pages配下はこのような感じ。

./pages/
|-- _app.js
|-- api
|   `-- hello.js
`-- index.js

起動してみる。

yarn dev

起動後、 http://localhost:3000 にアクセスすると以下のような画面が表示される。

また、pagesの階層にある通り http://localhost:3000/api/hello にアクセスした場合は以下のようになる。

最後に

ReactやNext.jsというキーワードは聞いたことがあったが、触れてみたことがなかったので軽く触ってみた。

ただのhello world的なやつなのでこれから少しずつ調べてみることにする。

Elasticsearch等と掛け合わせて何かできるのが理想。