2019年7月8日にNext.jsバージョン9.0がリリースされました!!

で、何やら見ていると、


APIのモックが簡単に作れる
ダイナミックルーティングが超簡単に
デフォルトでTypeScriptをサポート


とかとか、、、


え、やばない!?




ということでさっそく試してみました!

Next.js 9.0新機能デモ

以下3つの機能が個人的に今回のアップデートの目玉かなと思うので、それらについて試します。

今回試すもの

APIのモック作成
ダイナミックルーティング
TypeScript

その他詳細はこちら

事前準備

create-next-appが新機能にも追従してくれてるようなのでこちらを使用します。

インストールしていない人はしておきましょう。

npm install -g create-next-app

APIモックの作成

適当なフォルダに移動し、以下のコマンドを実行します。

create-next-app –example api-routes-micro api-routes-sample

api-routes-sampleという名前でプロジェクトが作成されるので、移動して起動しましょう。

cd api-routes-sample
npm run dev

http://localhost:3000/にアクセスすると以下のような画面が表示されるはずです。




なんとこの表示されている文字が既にAPI取得された結果です。

ファルダ構成は

pages
 - api
  - post.js
 - index.js

という感じで、コードを見てみると

index.js



post.js



このようになっており、超絶簡単にAPIモックの作成ができてしまうことが分かる。(jsonサーバーとか使わなくて良い…っ!)

ダイナミックルーティング

再度別の適当なフォルダに移動し、以下のコマンドを実行します。

create-next-app –example dynamic-routing dynamic-routing-sample

dynamic-routing-sampleという名前でプロジェクトが作成されるので、移動して起動しましょう。

cd dynamic-routing-sample
npm run dev

http://localhost:3000/にアクセスすると以下のような画面が表示されるはずです。

各リンクを押下した際の挙動とURLの変化を確認しましょう。

ファルダ構成は

components
 - header.js
pages
 - post
  - [id]
   - [comment].js
   - index.js
 - about.js
 - index.js

という感じで、コードを見てみると

header.js


index.js


[id]配下のindex.js


[comment].js



[]で囲む部分がダイナミックルーティングの制御箇所とみなされ、queryに渡される感じですね。

フォルダ名やファイル名に[]を付けるのは見慣れないですが、これはこれで一目で分かってありですね!

TypeScriptの使用

デフォルトでTypeScriptに対応しているとのことなので、先ほどの[id]フォルダ配下のindex.jsをindex.tsxに変換して再度npm run devしてみました。

すると以下のようなエラーが

ご親切にnpm install –save-dev typescript @types/react @types/nodeしなよ〜て言ってくれていますので言われるがままに

npm install –save-dev typescript @types/react @types/node

再度npm run devすると、




「おっなんかTypeScript使いたいみたいやからtsconfig.json作っといたで!」


とな!

なんという親切!ありがとうNextおじちゃん!!

上記で正常に起動でき、瞬殺でTypeScriptも使えるようになりました。

さいごに



めちゃめちゃ良くないっすか???



これだけでもReactを勧める理由になりそう←

というかNextの9になる前に触り始めといて良かった、、、こういう感動は大事にしたい。

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-