📈

nextjsその他について

2023/11/30に公開

Next.js

next13

tech

Loading

Loading UIはその経路のページUIが準備される前に、ユーザーにロード中であることを示すためのUIコンポーネントです。
これを利用すると、Reactのsuspense boundaryと同じ機能を自動的に使用できます。

export default function ContactLoading() {
  return <p>Loading...</p>;
}

必要なpage内部で個別で使うのができます。

Error

useEffectを使うのでuse clientで作ります。

"use client"; 

import { useEffect } from "react";

type Props = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function Error({ error, reset }: Props) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Error!!!</button>
    </div>
  );
}

page.tsx内部でthrow new Error(); を書いて確認できます。

Redirect,Rewrite

Redirect

特定のユーザーがクリックしたページ1が削除された場合、ページ2に行くように指示します
例えば、ユーザーがログインしないと見えないページに来た時、ログインページにリダイレクトをしてくれます。
またはサーチエンジンにページの経路が変更されたのを教えてあげます。

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: "/contact/aaaaaaa",
        destination: "/contact",
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

sourceにはRedirectしたいURLを書きます。destinationは移動させたいURLを書きます。
permanentを使ってサーチエンジンにこのページは移ったよって教えます。
もし日時的だったらpermanentをflaseですればいいです。

Rewrite

複雑なディレクトリ構成になっていたりセキュリティに敏感なキーがあればURLを外部に公開するとユーザーもみれることが可能なのでRewriteで設定して変えます。

async rewrites() {
    return [
      {
        source: "/sunny",
        destination: "/about/mypage/me/sunny",
      },
      {
        source: "/items/:slug",
        destination: "/products/:slug",
      },
    ];
  },

Loading

Error

Redirect,Rewrite

Redirect

Rewrite

Discussion