2022年10月26日に、新たなバージョンである「Next.js 13」がリリースされました。Next.jsをすでに利用していて、Next.js 13の新機能や使い方が知りたいという方も多いのではないでしょうか。この記事ではNext.js 13で新規プロジェクトを作成する方法や、新機能であるappディレクトリの使い方などを解説します。Next.js 13を活用したいアプリ開発者の方はぜひ参考にしてください。
新規プロジェクトの作成
まずは、Next.js 13で新規プロジェクトを作成しましょう。既存のプロジェクトをマイグレーションせず、「create-next-app」コマンドを利用して新規にプロジェクトを作成します。
|
1 |
npx create-next-app@latest |
上記のコマンドを実行すると、プロジェクト名やappディレクトリを利用するかどうかなどが問われます。任意のプロジェクト名を入力し、appディレクトリの利用有無の設定を行ってください。設定が完了すると、次のようなメッセージが表示されます。
「Success!」というメッセージが表示されていれば、プロジェクトの作成は成功です。
「next.config.js」の記述を確認
プロジェクトの作成時にappディレクトリを利用する設定を行っていれば、「next.config.js」の記述が次のようになっています。
赤枠で囲った部分の記述がない場合、appディレクトリが有効化されていません。「next.config.js」に赤枠内のコードを追記しておきましょう。
プロジェクトの実行
作成したプロジェクトのディレクトリに移動した状態で「npm run dev」のコマンドを使用すると、次の表にあるメッセージが表示され、プロジェクトが実行されます。
プロジェクトの実行中に、ブラウザで「http://localhost:3000」にアクセスすると、「src/app/page.tsx」にデフォルトで記述されているページの内容が表示されます。 （※ローカルPC上に作成されるアドレスです）
ここまでの手順で、Next.js 13を使用するための準備は完了です。プロジェクトを停止する際はコマンドプロンプトで「Ctrl＋C」を入力しましょう。
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞appディレクトリに移行してページの追加
従来のNext.jsではプロジェクトの作成時に「pages」という名称のディレクトリが作成されていました。Next.js 13でappディレクトリの機能を使用する場合、「pages」ではなく「app」という名称のディレクトリが必要です。
ただし、プロジェクトの新規作成時にappディレクトリの使用を選択していれば、「app」ディレクトリが自動で作成されます。pagesディレクトリからappディレクトリへの移行作業は不要です。
ページの追加方法： 「page.tsx」ファイルを作成 する
Next.js 13でプロジェクトに新規ページを追加する場合、appディレクトリ内に新たなディレクトリを作成し、その中に「page.tsx」ファイルを作成します。
例えば「/test」というページを作る際は、appディレクトリ内に「test」という名称のディレクトリを作成し、「page.tsx」ファイルに以下のコードを記述しましょう。
|
1 2 3 4 5 |
const Test = () => { return <p>Testページ</p>; }; export default Test; |
「npm run dev」コマンドでプロジェクトを実行し、ブラウザで「http://localhost:3000/test」にアクセスすると、「src/app/test/page.tsx」に記述された内容が表示されます。
このように、appディレクトリ内にディレクトリを作ることで、新規ページの作成が可能です。
共通のレイアウトを定義できる
従来のNext.jsでは、pagesディレクトリ内に各ページのファイルがあり、アプリの共通設定は_documentや_appで指定されていました。一方、Next.js 13では、「app/layout.tsx」ファイルで全ページ共通のレイアウトを定義することが可能です。
Next.jsにはhtmlタグを自動生成する機能がないため、レイアウトを定義する必要があります。プロジェクトの新規作成時にappディレクトリの利用を選択すれば、「app/layout.tsx」がデフォルトで作成されます。必要に応じてlayout.tsxの中身を書き換え、ページの見た目を編集しましょう。
Server Component
Server ComponentとはNext.js 13で利用できる機能の1つです。コンポーネントの一部をサーバー側で処理することで、Webアプリのパフォーマンスを向上できます。Server Componentの使い方の例は次の通りです。
fetch関数を用いたデータ取得の例
Server Componentの動作を試す例として、サーバーにアクセスし、fetch関数でデータを取得する方法を紹介します。アクセスするサーバーは、JSON形式のダミーデータを用いてテストができる無料のAPIサーバー「JSONPlaceholder」です。
まずは、appディレクトリ内に「test」ディレクトリを作成し、「https://jsonplaceholder.typicode.com/users」からユーザー一覧データを取得するコンポーネント「GetMembersList.tsx」を作成しましょう。ファイルに記述するコードは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
type Member = { id: number; name: string; email: string; }; const getMembers = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const members: Member[] = await response.json(); return members; }; const MembersList = async () => { const members = await getMembers(); return ( <> <h1>ユーザー一覧</h1> <ul> {members && members.map((member) => <li key={member.id}>{member.name}</li>)} </ul> </> ); }; export default MembersList; |
次に、このコンポーネントを呼び出すためのコードを「test/page.tsx」に記述します。
|
1 2 3 4 5 6 7 8 9 10 |
import MembersList from './GetMembersList'; const Test = () => { return ( <> <MembersList /> </> ); }; export default Test; |
コマンドプロンプトで「npm run dev」を実行し、ブラウザで「http://localhost:3000/test」にアクセスしてください。
ブラウザにユーザー一覧のデータが表示されていれば、Server Componentを用いたデータ取得は成功です。
Client Component
Client Componentとは、Webブラウザなどクライアント側で処理を行うコンポーネントです。サーバーなどからデータを取得するFetch dataの処理は、Client Componentでも実行できます。ただし、データ取得は基本的にServer Componentで行うことが推奨されています。
Client Componentの主な利用場面は、ブラウザのAPIやクリックイベントの取得などです。ここでは、Client Componentの例として、クリック回数をカウントするコードを紹介します。
クリック回数を取得するClient Componentの例
まずは「test」ディレクトリに「ClickCount.tsx」を作成し、次のコードを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
'use client'; import { useState } from 'react'; const Clicks = () => { const [count, setCount] = useState<number>(0); const Increase = () => { setCount((pre) => pre + 1); }; return ( <> <h2>クリック回数</h2> <div>{count}回</div> <button onClick={Increase}> + </button> </> ); }; export default Clicks; |
1行目にある「’use client’;」は、このファイルをClient Componentとして扱うためのコードです。Next.js13のデフォルト設定では、appディレクトリ内に作成したコンポーネントはServer Componentとして扱われます。Server Componentのままではクライアント側での操作を取得できないため、Client Componentの指定を忘れずに記述しましょう。
次に、「test/page.tsx」ファイルの中身を下記のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 |
import Clicks from './ClickCount'; const Test = () => { return ( <> <Clicks /> </> ); }; export default Test; |
「npm run dev」コマンドでプロジェクトを実行し、ブラウザで「http://localhost:3000/test」にアクセスしてください。
ブラウザ上に表示された「＋」ボタンをクリックするたびに、回数の表示が増えていれば、Client Componentの動作確認は成功です。
Next.js 13のパフォーマンスを向上させるその他の機能
Next.js 13は、appディレクトリ以外にも様々な機能によってパフォーマンスを向上できます。主な機能は次の通りです。
Turbopack (alpha)：高速な更新
Turbopackは、従来はWebpackとして提供されていたソフトウェアです。Rustベースで開発されているTurbopackはWebpackと比べて700倍高速にアップデートができます。また、コールドスタートでのベンチマークテスト結果も、Webpackの4倍高速です。
フロントエンドのビルドツールである「Vite（ヴィート）」と比較しても、Turbopackの動作は10倍の速さとなっています。Turbopackを利用することで起動時間を短縮し、パフォーマンスの向上が可能です。
参考：[Blog – Next.js 13 | Next.js]
New next/image：良好な環境
Next.js 13では、新たなImageコンポーネントである「next/image」が導入されました。新たなImageコンポーネントでは、画像の表示などのパフォーマンスが向上します。
クライアント側が出力するJavaScriptの量を減らせることや、Webプラットフォームとの連携、スタイルの設定が簡単なことが「next/image」の特徴です。標準でaltタグが必要なため、Webサイトのアクセシビリティ向上につながります。
ブラウザネイティブの遅延読み込みにより、インタラクティブにページを生成する「ハイドレーション」が不要です。ファイルをオンデマンドで最適化し、Core Web Vitalsが改善されることでパフォーマンスを向上できます。
New @next/font (beta)：フォントの自動最適化
Next.js 13では、「@next/font」と呼ばれる新しいフォントシステムが導入されました。カスタムフォントを含むフォントの表示を自動で最適化できます。また、CSSのサイズ調整プロパティを利用し、画像表示によるレイアウトのずれを解消することが可能です。
サーバーにアップした任意のフォントファイルをWebフォントとして扱う「自動セルフホスティング」機能を内蔵していることも「@next/font」の特徴です。
プライバシー面への配慮やパフォーマンス向上のため、フォントデータの利用に際して外部ネットワークへのリクエストは行われません。Googleフォントも安全かつ便利に使用でき、Web開発のパフォーマンスが向上します。
Improved next/link：手動の手間を排除
Next.js 13の「next/link」では、手動で<a>タグを記述する必要がありません。<Link>と</Link>で挟まれたコードには、自動的に<a>タグが付加された状態でレンダリングが実行されます。
Next.js 13に搭載された様々な新機能は、Webアプリ開発のパフォーマンス向上に役立ちます。appディレクトリや各種コンポーネントなど、新たな機能の使い方を理解した上で、Next.js 13による開発を行いましょう。
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中