【Next.js】Next.jsのHello World行ってみた

はじめに

こんにちは、がんがんです。

研究室などにも影響が広まり、在宅で作業を行っております。
最近はもっぱらReact.jsを触っているのですが、React.jsのSSRとしてNext.jsというフレームワークがあるようです。

Gatsby.jsなどもあるようですが、フロントひよっこなのであまり違いは分かっていない感じです。
やっぱり触ってみないと分からないということで、まずは手当たり次第触ってみようと思います。

目次

目的

• Next.jsについて触ってみる
• examplesのhello worldをやってみる

公式サイト

nextjs.org

github.com

開発環境の準備

毎度のことですがまずはDockerにて開発環境を整えます。
今後Firebaseの方にデプロイ実験するかもしれないので、Node.jsのバージョンは10を指定しています。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    image: practice/next:dev
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src
    tty: true
    stdin_open: true
    command: /bin/sh

Dockerfile

FROM node:10.19.0

WORKDIR /usr/src

#  環境の準備
RUN npm i -g npm \
    && rm -rf /var/lib/apt/lists/*

Next.jsのGetting Startedを試してみる

まずはGetting Startedを試していきます。

参考

nextjs.org

実行していく

(ホストOS) $ docker-compose up -d && docker-compose exec app bash
#  npmの場合
(docker) $ npm init next-app
#  yarnの場合
(docker) $ yarn create next-app

インストールが完了し、対象ディレクトリに移動します。yarn devコマンドを実行し、http://localhost:3000に移動すると以下のようなページが表示されます。
簡単すぎてびっくりしました。

Next.jsのcreate-next-app(hello world)を試してみる

React.jsのときにも感じましたが、create-next-appがきちんと整っているのは非常に助かります。
様々なexamplesの中で、今回はhello worldを試してみました。

参考

github.com

create-next-appする

(docker) $ npm init next-app --example hello-world hello-world-app

hello-worldの特徴

hello worldの特徴としては、pagesディレクトリ直下です。

 pages
  ├── day
  │    └── index.js
  ├── index.js
  └── about.js

react-routerを使った時は1つずつルーティングしていたのですが、pages直下がそのままルーティングになっています。
1つ1つのルーティングをフォルダ単位でやれるのはフロントひよっこの自分的にはありがたいです。

おわりに

今回はNext.jsを触ってみました。React.js同様のJSX記法やstyled-jsxなど、1つの言語で完結するのは個人的にすごくありがたいですね。
次は実際にFirebase Hostingにdeployしてみようと思います。