こんにちは、エンジニアのオオバです。
Next.jsはReactベースの
フロントフレームワークです。
サーバーレスブログシステムを作りたくて、
調査をしているとNext.jsが良さそうでした。
ぼくは開発効率重視の人間です。
効率を上げるためにやること
- 公式提供のチュートリアルを動かす
- YouTubeで動画学習
ざっと2時間くらい頭に入れてから
ソースコードを書くとスムーズに書けます。
ということで今回は公式が
提供するNext.jsのチュートリアルを進めていきます。
これからNext.jsを始めたいと
思っている方に参考になればと思います。
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
3つのコマンドを順番に実行するだけで完了
とりあえず結論を知りたい方は
コチラの手順に従ってコマンドを実行し、
最後にhttp://localhost:3000にアクセスすると
今回の完成までたどり着けるかと思います。
$ npx create-next-app nextjs-blog$ cd nextjs-blog$ npm run devhttp://localhost:3000にアクセス
NodeJSのインストール（v10.13以降）
Next.jsを動かすためにはバックエンドのNode.jsが必須です。
HomeBrewやNodeBrewでインストールしましょう
$ brew install node
ちなみにぼくはNodeBrewで複数バージョン管理をしています。
複数のNode.jsを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のすごいところ。
サイトが爆速化する。
このページを作って、触ってみて
ぼくはNext.jsを本気で勉強したくなりました。
引き続きNext.jsのチュートリアルを進めていきます。
この記事が気に入ったらフォローしよう
- Next.js v11.1.2
- Node.js v14.16.1
- npm 6.14.12
- macOS Big Sur 11.5.2