こんにちは。
Next.jsの最新アップデート、バージョン13がリリースされましたね。
今回はその中でも特に注目されている「レンダリングモード」に焦点を当て、その特徴と利用方法を3つの具体例を交えて解説していきます。
新しいレンダリングモードの概要
Next.js 13では、レンダリングモードがさらに進化しました。
それでは、新しいレンダリングモードの特徴を見ていきましょう。
具体例1: 静的サイト生成(SSG)の最適化
Next.jsはSSGをサポートしており、ビルド時にHTMLを生成することができます。
新しいアップデートでは、このSSGのパフォーマンスがさらに向上しています。
以下のコードは、新しいレンダリングモードを利用したSSGの基本的な実装例です。
// pages/index.js
export async function getStaticProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const data = await res.json();
return {
props: {
data,
},
};
}
function HomePage({ data }) {
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
このコードでは、getStaticProps関数を使用して外部APIからデータを取得し、それをプロップスとしてコンポーネントに渡しています。
これにより、ビルド時にデータがフェッチされ、静的なHTMLが生成されます。
SEO対策としてのメタタグの最適化
Next.js 13では、SEO対策としてメタタグの最適化が容易になりました。
以下のコードは、メタタグを最適化する基本的な実装例です。
// pages/_app.js
import Head from 'next/head';
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<title>Next.js 13 最新アップデート特集</title>
<meta name="description" content="Next.js 13の新しいレンダリングモードを徹底解説します。" />
<meta name="keywords" content="Next.js, レンダリング, SSG, SEO" />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
このコードでは、_app.jsファイルにHeadコンポーネントを利用してメタタグを設定しています。これにより、SEOを意識したウェブページの構築が可能になります。
具体例2: サーバーサイドレンダリング(SSR)の最適化
Next.js 13では、サーバーサイドレンダリング(SSR)もさらにパワーアップしました。
以下のコードは、新しいレンダリングモードを利用したSSRの基本的な実装例です。
// pages/index.js
export async function getServerSideProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const data = await res.json();
return {
props: {
data,
},
};
}
function HomePage({ data }) {
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
このコードでは、getServerSideProps関数を使用して外部APIからデータを取得し、それをプロップスとしてコンポーネントに渡しています。
これにより、リクエストごとにデータがフェッチされ、動的なコンテンツのレンダリングが可能になります。
具体例3: ISR(Incremental Static Regeneration)の活用
Next.js 13では、ISRの機能がさらに強化されました。
以下のコードは、ISRを活用したページの基本的な実装例です。
// pages/index.js
export async function getStaticProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const data = await res.json();
return {
props: {
data,
},
revalidate: 60, // 60秒ごとに再生成
};
}
function HomePage({ data }) {
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
このコードでは、getStaticProps関数にrevalidateオプションを設定して、ページの再生成を60秒ごとに行うようにしています。
これにより、静的なページでありながら動的なデータを効果的に表示することが可能になります。
高度なテクニック: レンダリングモードの組み合わせ
Next.js 13の新しいアップデートでは、異なるレンダリングモードを組み合わせて使用することで、さらに高度なウェブアプリケーションを構築することが可能になりました。
以下、その方法を3つの具体例を用いて解説します。
具体例1: SSGとISRを組み合わせる
SSGとISRを組み合わせることで、静的なページを生成しつつ、定期的にデータを更新することが可能になります。
以下のコードはその基本的な実装例です。
// pages/index.js
export async function getStaticProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const data = await res.json();
return {
props: {
data,
},
revalidate: 60, // 60秒ごとに再生成
};
}
function HomePage({ data }) {
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
具体例2: SSRとClient-side Fetchingを組み合わせる
SSRとClient-side Fetchingを組み合わせることで、サーバーサイドでの初期レンダリングと、クライアントサイドでのデータフェッチを行うことができます。
以下のコードはその基本的な実装例です。
// pages/index.js
import useSWR from 'swr';
export async function getServerSideProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const initialData = await res.json();
return {
props: {
initialData,
},
};
}
function HomePage({ initialData }) {
const { data } = useSWR('<https://api.example.com/data>', { initialData });
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
具体例3: ISRとClient-side Fetchingを組み合わせる
ISRとClient-side Fetchingを組み合わせることで、静的なページを生成しつつ、クライアントサイドでのデータ更新を行うことができます。
以下のコードはその基本的な実装例です。
// pages/index.js
import useSWR from 'swr';
export async function getStaticProps() {
// 外部APIからデータを取得
const res = await fetch('<https://api.example.com/data>');
const initialData = await res.json();
return {
props: {
initialData,
},
revalidate: 60, // 60秒ごとに再生成
};
}
function HomePage({ initialData }) {
const { data } = useSWR('<https://api.example.com/data>', { initialData });
return (
<div>
{data.map((item, index) => (
<p key={index}>{item.name}</p>
))}
</div>
);
}
export default HomePage;
おわり
以上が、Next.js 13の新しいレンダリングモードです。
この記事を参考に、さらに高度なウェブアプリケーションを構築してみてください。
