Zenn
Open7

学習ログ: Reactもろくに知らないけどNext.js入門する

Next.js
React
初心者
ばつしい / vatscyばつしい / vatscy

Reactろくに知らないけどNext.js入門していきます。
Next.jsから入って必要な知識は都度収集していきます。

ばつしい / vatscyばつしい / vatscy

Next.js とは

Create a Next.js App | Learn Next.js

特徴

  • 直感的なルーティングの仕組み
  • SSG & SSR
  • 読み込み高速化のためのコード分割の自動化
  • クライアントサイドでのルーティング
  • Built-in CSS(JS内でCSSをインポート)やSassのサポート
  • TypeScriptサポート
  • Fast Refresh (ホットリロード的な？)
  • サーバレスAPI
  • 全体的に拡張可能
ばつしい / vatscyばつしい / vatscy

環境構築

Setup - Create a Next.js App | Learn Next.js

macOS Big Sur 11.1 で環境構築していく。

Node.js

とりあえずまずはNode.js 10.13以上が必要。

$ node -v
v14.4.0

入ってるっちゃー入ってるが、最新版を確認しておく。
確かnodebrewで入れた気がするので尋ねてみる。

$ nodebrew ls-remote

2021/01/20現在では v15.6.0が最新っぽいので更新していく。

$ nodebrew install v15.6.0

$ nodebrew ls
v14.4.0
v15.6.0

current: v14.4.0

$ nodebrew use v15.6.0
use v15.6.0

これやるとグローバルインストールしていたパッケージが使えなくなるので注意。
zenn-cli だけはちゃんと入れ直しておく。

Create a Next.js app

作業用のディレクトリに移動して下記コマンドを実行。

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

するとサンプルアプリが作られる

$ ls
nextjs-blog/

中に移動して実行してみる。

$ cd nextjs-blog
$ npm run dev

> learn-starter@0.1.0 dev
> next dev

ready - started server on http://localhost:3000
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

結果: