Next.jsのバージョン9が出たそうです。結構色々強化されたようで、個人的には下記の2つが気になりました。
とりあえずこれを試してみます。
とりあえずcreate-next-appでプロジェクトを作成します。
yarn create next-app my-app
問題なく最新のNext.js9が入っているようです。プロジェクト内のファイルを見てみると、今までどおり普通のJavaScriptで構成されていました。
本家のブログにも書かれている通り、とりあえず各ファイルをTypeScriptに変えれば色々メッセージを表示したり初期設定してくれるということなので、デフォルトで配置されているindexページとhead, navコンポーネントの拡張子をtsxに変更し、yarn dev
で実行してみました。
すると下記のコマンドを実行しろ、と言われるので必要な依存関係をインストールします。
yarn add --dev typescript @types/react @types/node
これで再度実行してみると、nav.tsxの一部に型エラーが出ているので一旦とりあえず適当に処理します。(僕はエラーが出てるところをとりあえず消しました)
再度実行すると勝手にtsconfig.jsonが作成され、正常にビルドが行われました。
TypeScriptは設定する人やアプリケーションによって設定などの実装方法にバラツキがあったり使い勝手にも違いがあったりするため、公式でしっかり用意してくれているのは安心感があって良いと思います。(ガッツリ触ったわけじゃないのでまだ分かりませんが)
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に関しては開発時に面倒なことは省きたいので、どんどん便利なものが実装されていってほしいです。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント