Nextjs13のアプデ内容まとめ
Next.jsの最大の強みといえば、page/ディレクトリにより自動でルーティングしてくれるところ。
reactの場合、react-router-domを使ってルーティングの設定を手動で行っていたが、その必要がないのがほんとに便利！
バージョン13ではさらにapp/ディレクトリという仕組みを追加した。
主な変更点は以下。
Layouts
全体の枠組みのレイアウトコンポーネントを書くことができるようになった。
部分的にも可能に！
例えば、app/articles/Layout.tsxにすると、articles以下のディレクトリにLayout.tsxで記述したレイアウトが適用される！
Server Components
クライアントに送信されるデータ量を減らして初期のページロードを高速化するようになった。
ページ単位からコンポーネント単位でのpre-rendringが可能になった。
Streaming
ページ全体のロードを待たずにユーザーは操作可能。
以前は一部のデータをフェッチするために、ページ全体がロードされてしまいユーザーが操作可能になるまでに時間がかかっていた。
Data Fetching
今まで
export default function Page({ data }) {
// dataを表示するコンポーネント
}
// 以下でgetServerSideProps やgetStaticPropsでfetch
export async function getServerSideProps() {
const res = await fetch(`https:~`)
const data = await res.json()
return { props: { data } }
}
13からは、getStaticPropsやgetServerSidePropsではなく「async function getData（）」でfetchする。
デフォルトではSSG。
以下のように、dataをfetchする。
export async function getData() {
const response = await fetch(`https://~`);
const data: Data = await response.json();
return data;
}
表示したいコンポーネント
// 'use client'と明示するとクライアントサイドレンダリングになる
export default async function DisplayPage() {
const data = await getData();
return (
<div>
{data.title}
</div>
);
}
loadingコンポーネントを挟む
export default function AsyncLoading() {
return (
<>
<div>
<Suspense fallback={<p>loading...</p>}>
<DisplayPage />
</Suspense>
</div>
</>
);
}
SSGやSSRなどレンダリング手法を指定したい時
・SSGの指定方法
export async function getData() {
const response = await fetch(`https://~`, { cache: 'force-cache' });
const data: Data = await response.json();
return data;
}
・SSRの指定方法
export async function getData() {
const response = await fetch(`https://~`, { cache: 'no-store' });
const data: Data = await response.json();
return data;
}
・ISRの指定方法
export async function getData() {
const response = await fetch(`https://~`, { next: { revalidate: 10 } });
const data: Data = await response.json();
return data;
}
Linkタグについて
LInkタグの中に、aタグを挿入する必要がなくなった。
↓のような感じ
/* 12 */
<Link href="/link">
<a>リンク</a>
</Link>
/* 13 */
<Link href="/link">
リンク
</Link>
まだ、アプデ内容を導入して開発したことがないので、これからどんどん使っていこうと思う！！
