2019-07-10に更新

Next.js9を試してみる

Next.jsのバージョン9が出たそうです。結構色々強化されたようで、個人的には下記の2つが気になりました。

  • 設定しなくてもTypeScriptが使える(Built-in Zero-Config TypeScript Support)
  • API用のルーティングも作れる(API Routes)

とりあえずこれを試してみます。

インストール

とりあえずcreate-next-appでプロジェクトを作成します。

yarn create next-app my-app

問題なく最新のNext.js9が入っているようです。プロジェクト内のファイルを見てみると、今までどおり普通のJavaScriptで構成されていました。

TypeScript

本家のブログにも書かれている通り、とりあえず各ファイルをTypeScriptに変えれば色々メッセージを表示したり初期設定してくれるということなので、デフォルトで配置されているindexページとhead, navコンポーネントの拡張子をtsxに変更し、yarn devで実行してみました。

すると下記のコマンドを実行しろ、と言われるので必要な依存関係をインストールします。

yarn add --dev typescript @types/react @types/node

これで再度実行してみると、nav.tsxの一部に型エラーが出ているので一旦とりあえず適当に処理します。(僕はエラーが出てるところをとりあえず消しました)

再度実行すると勝手にtsconfig.jsonが作成され、正常にビルドが行われました。

TypeScriptは設定する人やアプリケーションによって設定などの実装方法にバラツキがあったり使い勝手にも違いがあったりするため、公式でしっかり用意してくれているのは安心感があって良いと思います。(ガッツリ触ったわけじゃないのでまだ分かりませんが)

APIルーティング

APIルーティングも試してみます。

ドキュメントによるとpagesフォルダにapiフォルダを作ってそこに配置すればOKとのことですが、とりあえずそこにhello.tsを置いてみます。

export default function handle(req, res) {
  res.json({ body: 'Hello World' })
}

そして http://localhost:3000/api/hello にアクセスしてみると、JSONが表示されました。

{"body":"Hello World"}

ちゃんとミドルウェアも動いているよ、とのことなので

export default function handle(req, res) {
  res.json(req.query)
}

に変更してGETパラメータを試してみます。 http://localhost:3000/api/hello?test=a

{"test":"a"}

ちゃんと表示されてますね。API側も開発サーバーを手動でリロードしなくても更新されます。

まとめ

今回は結構いい感じのバージョンアップが来たような気がします。なにより、公式ブログの端々に「調査してみたら、こんな感じで使われていて、こんな要望があることがわかったのさ」の様な記述があり、しっかりユーザーのことを考えて開発を進めているのだという事がわかり好感が持てました。

React側はシンプル重視かもしれませんが、Next.jsに関しては開発時に面倒なことは省きたいので、どんどん便利なものが実装されていってほしいです。

Blog - Next.js 9 | Next.js

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント