こんにちは、エンジニアのオオバです。

Next.jsはReactベースの
フロントフレームワークです。

サーバーレスブログシステムを作りたくて、
調査をしているとNext.jsが良さそうでした。

ぼくは開発効率重視の人間です。
効率を上げるためにやること

ざっと2時間くらい頭に入れてから
ソースコードを書くとスムーズに書けます。

ということで今回は公式が
提供するNext.jsのチュートリアルを進めていきます。

これからNext.jsを始めたいと
思っている方に参考になればと思います。

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

3つのコマンドを順番に実行するだけで完了

とりあえず結論を知りたい方は
コチラの手順に従ってコマンドを実行し、
最後にhttp://localhost:3000にアクセスすると
今回の完成までたどり着けるかと思います。

  1. $ npx create-next-app nextjs-blog
  2. $ cd nextjs-blog
  3. $ npm run dev
  4. http://localhost:3000にアクセス

NodeJSのインストール(v10.13以降)

Next.jsを動かすためにはバックエンドのNode.jsが必須です。
HomeBrewやNodeBrewでインストールしましょう

HomeBrewでnodeをインストール
$ brew install node  

ちなみにぼくはNodeBrewで複数バージョン管理をしています。

Node.jsをインストールしたら
Next.jsのアプリを作っていきます。

nextjs-blogというアプリを作成する

チュートリアルに従い以下のコマンドを実行します。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"  

npx create-next-app アプリ名(nextjs-blog)コマンドを実行して
nextjs-blogというアプリを作成しています。

諸々処理が終了するとnextjs-blogというディレクトリが
作成されているため以下のコマンドで移動します。

$ cd nextjs-blog  

以下のコマンドを実行します。

$ npm run dev  

するとサーバーが立ち上がります。

ready - started server on https://localhost:3000  
event - compiled successfully  

サーバー起動成功

https://localhost:3000にアクセスしてみます。
デフォルトのページが表示されました。

【Next.js】たった4ステップでサーバーを立てる方法_0

カンタン過ぎる(笑)

カンタンは正義だ

カンタンというのは大事ですよね。
だから流行るんです。

デフォルトページ触ると分かるんですが、
アクセスが異様に早いのです。

そう、ここがNext.jsのすごいところ。
サイトが爆速化する。

このページを作って、触ってみて
ぼくはNext.jsを本気で勉強したくなりました。

引き続きNext.jsのチュートリアルを進めていきます。

オススメ記事
検証環境
参考サイト