Zenn
🧐

Next.js 14の新展望: 新機能とその影響を徹底解説 written by ChatGPT-4

2023/10/28に公開
AI
Next.js
ChatGPT
LLM
生成 AI
tech

こんにちは。
TecSocです。昨日、Next.js14がリリースされましたね。
一体どんな機能があって、どういうメリットがあるのか正直全部追いきれていないので

ChatGPT-4 with Bingを使ってキャッチアップしてみることにしました。
せっかくなので、みなさんと共にChatGPT(LLM)の威力に怯えながらNext.js 14をキャッチアップしていけたらと思い、この記事を公開しています。
ちなみに、記事タイトルもChatGPTに書いてもらいました。
「written by ChatGPT-4」の部分は自分で足しました。
AIとはいえ人が書いたものを自分の手柄にはできないので。

それでは、ChatGPTの世界へお気をつけていってらっしゃいませ。

Next.jsは常にフロントエンド開発の新しい境地を切り拓くためのイノベーションを提供してきました。その最新バージョンであるNext.js 14も例外ではありません。このバージョンは、開発プロセスの高速化、コードの効率性の向上、そしてアプリケーションのパフォーマンス向上を実現するための新しい機能と改善を導入しています。これらの変更は、フロントエンド開発の新しい可能性を広げ、開発者コミュニティに多くの価値を提供することを約束しています。

この記事は、Next.js 14の新機能と改善の概要を提供し、それらが実際のプロジェクト開発にどのように影響するかを詳しく説明します。また、各新機能のメリットとデメリットを議論し、Next.js 14への移行に関する実用的なアドバイスを提供します。

特に、Next.js 14の新機能について知りたい方や、新機能のメリットとデメリットを理解し、それらをプロジェクトにどのように適用するかを知りたい方を対象としています。以下のセクションでは、主要な新機能と改善について詳細に説明し、それぞれの技術的な影響と実用的な利点について考察します。さらに、Next.js 14への移行プロセスに関する実用的なガイダンスも提供します。

Next.js 14が提供する新しい機能と改善により、フロントエンド開発の新しい範疇が開かれ、開発者はより高速で効率的な開発プロセスと、優れたユーザーエクスペリエンスを提供するアプリケーションを構築することができるでしょう。それでは、Next.js 14の新しい世界を一緒に探っていきましょう。

1. Turbopack: 開発プロセスの高速化

Next.js 14の目玉とも言える新機能の一つがTurbopackです。これは、開発モード next dev の新しい --turbo オプションを通じて利用できるRust製のモジュールバンドラーツールで、開発環境におけるビルド時間の高速化とコードのリアルタイム反映を行うホットリロード機能を提供しています【49†(source)】。

Turbopackの主な特徴と利点:

  • ビルド時間の高速化:
    Turbopackの利用により、ビルドプロセスが高速化され、コードの変更が即座に反映されるため、開発者は迅速にフィードバックを受け取ることができます。

  • リアルタイムのホットリロード:
    Turbopackを利用することで、ファイルの保存時に自動的にブラウザを更新し、最新のコード変更を即座に反映させることができます【49†(source)】。

  • 大規模プロジェクトにおける効果:
    Turbopackは特に大規模なプロジェクトにおいて、ローカルサーバーの起動が53.3%高速化し、コード更新によるリフレッシュが94.7%高速化されることが報告されています【50†(source)】。

Turbopackの利用例:

以下のコマンドを使用して、Turbopackを有効にし、開発サーバーを起動します。

npm run dev --turbo

このコマンドにより、Turbopackが起動し、プロジェクトのビルドと実行が高速化されます。次に、コードを変更し、ホットリロードがどのように機能するのかを確認します。

Turbopackの導入により、Next.jsプロジェクトの開発速度を大幅に向上させ、開発者の生産性を向上させることが期待できます。

2. ReactのServer ActionsとApp Routerの組み合わせ

Next.js 14では、ReactのServer Actionsと新しいApp Routerが組み合わせられています。これらの新機能は、フロントエンドとバックエンドのコーディング労力を大幅に削減し、データの取得とルーティングの管理を効率化します。

ReactのServer Actionsの概要:

ReactのServer Actionsは、クライアントサイドからサーバーサイドのロジックを直接呼び出す新しいメカニズムを提供します。Server Actionsを利用するには、next.config.js ファイルの experimental の項目に serverActions を追加する必要があります【71†source】。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
}
module.exports = nextConfig;

Server Actionsは use server ディレクティブを関数の先頭に配置することで作成されます。このディレクティブは、この関数がサーバー上でのみ実行されることを保証します。この関数は直列化可能な引数と直列化可能な戻り値を持つ必要があります【96†(source)】。

// actions.ts
'use server'

export async function getInformationFromTheServer(name: string) {
  return `Hello ${name}!`
}

上記のコードスニペットは、use serverディレクティブを使用してServer Actionsを作成する基本的な例を示しています【103†(source)】。

App Routerの概要:

App Routerは、新しいルーティングシステムであり、ページベースのルーティングを提供します。これにより、開発者は各ページのルーティングロジックを簡単に管理し、アプリケーションのナビゲーションを効率的に構築できます。

利用例:

以下は、ReactのServer ActionsとApp Routerを組み合わせたシンプルな例です。

// pages/index.js
import { useRouter } from 'next/router';
import { getInformationFromTheServer } from '../actions';

export default function Home() {
  const router = useRouter();

  const handleGreeting = async () => {
    const greeting = await getInformationFromTheServer('Next.js user');
    alert(greeting);
  };

  return (
    <button onClick={handleGreeting}>Get Greeting</button>
  );
}

上記のコードでは、handleGreeting関数を通じて、getInformationFromTheServer関数を呼び出し、サーバーからの挨拶メッセージを取得しています。

ReactのServer ActionsとApp Routerの組み合わせは、フロントエンドとバックエンドのコードを簡潔に保ちながら、効率的にデータを処理し、アプリケーションのロジックを構築するための強力なツールとなります。

3. Partial Prerendering: 効率的なレンダリング戦略の導入

Next.js 14は、新しい「Partial Prerendering」機能を導入し、ページ内の動的部分と静的部分を効果的に区別することができるようになりました。このセクションでは、Partial Prerenderingの概要、メリット、デメリット、および実際の利用例について説明します。

Partial Prerenderingの概要:

Partial Prerenderingは、ページ内で動的コンテンツと静的コンテンツを区別し、それぞれを効率的にレンダリングする新しい機能です。これにより、全てのコンテンツを毎回レンダリングするのではなく、必要な部分だけをレンダリングし、ページのロード時間を短縮することができます。

メリット:

  • パフォーマンスの向上: 部分的なプレレンダリングにより、ページのロード時間が短縮され、ユーザーエクスペリエンスが向上します。
  • 効率的なリソース利用: 必要なコンテンツだけをレンダリングすることで、サーバーとクライアントのリソースを効率的に利用できます。

デメリット:

  • 実装の複雑さ: 部分的なプレレンダリングを正しく実装するには、タグベースのシステムを理解し、適切に利用する必要があります。

利用例:

以下は、Partial Prerenderingを使用したシンプルなページの例です。

// pages/index.js
import { useState } from 'react';

export default function Home() {
  const [dynamicContent, setDynamicContent] = useState('Dynamic Content');

  return (
    <div>
      <h1>Static Content</h1>
      <p>{dynamicContent}</p>
      <button onClick={() => setDynamicContent('Updated Content')}>Update</button>
    </div>
  );
}

上記のコードでは、<h1>タグは静的コンテンツを、<p>タグは動的コンテンツを表示しています。Updateボタンをクリックすると、動的コンテンツが更新されますが、静的コンテンツは変更されません。

Partial Prerenderingは、Next.jsプロジェクトでページのパフォーマンスを向上させ、効率的なリソース利用を実現するための強力な機能です。また、大規模なプロジェクトでは、この機能を利用することで、ページのロード時間を短縮し、ユーザーエクスペリエンスを向上させることが可能です。

いかがだったでしょうか？

個人的な感想では、機能の説明などはかなり分かりやすく
Xなどで聞いていた情報と変わらなくて（＝そこまで間違ったことは言っていなそうで）、すごいなぁと感心する一方
新機能の良さを解説してくれる具体的なコードがもう少しあると嬉しかったなぁと思います。
でも、Next.js 14を使っているコードはまだゼロに等しいと思うので、ドキュメントを読んだだけで
使い方を解説するコードが出力されたりしたら、エンジニアの仕事が無くなりそうでいよいよ怖いので
ほっとする気持ちも若干あります。
今後とも、ChatGPT・Next.js共に動向を注視していきたいと思います。

Discussion