// next.config.js
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    config.plugins.push(new CaseSensitivePathsPlugin());
    return config;
  },
}
module.exports = nextConfig

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import Loading from '@/components/ui/Loading/Loading';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [nowLoading, setLoading] = useState(false);
  useEffect(() => {
    const handleStart = () => setLoading(true);
    const handleComplete = () => setLoading(false);
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);
    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

  return (
    <>
      {nowLoading && <Loading />}
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

export default function PageHeader({ titleHtmlTag = 'h1' }) {
  const Title = titleHtmlTag; // propsを直接タグに使うとうまくいかないから一度変数に入れる
  return (
    <>
        <Title>タイトル</Title>
    </>
  );
}

import { format } from 'date-fns';
const formattedDate = format(new Date(apiResponse.date), 'yyyy/MM/dd');

import { getNewsPost } from '@/features/news/api/getNewsPost'; // 投稿を取得するメソッド
import useCheckDraftPost from '@/hooks/useCheckDraftPost';

export default function NewsSingle({}) {
  const { postDetail, loading } = useCheckDraftPost(getNewsPost);
  if (loading) {
    return <p>Loading...</p>;
  }
  return (
    <NewsDetail data={postDetail} />
  )
}

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

/**
 * 下書き用の投稿を表示するフック
 * パラメータのsecretがenvで定義した値と一致しない場合、トップページへリダイレクトさせる（不正アクセス防止）
 * 以下のようにアクセスするイメージ
 *   /path/to/?slug=記事スラッグ&secret=envで定義した値
 * @param {Function} getPost 投稿を取得するためのメソッド
 * @returns {Object} postDetail 投稿詳細のデータ
 * @returns {Boolean} loading データ取得中ならTrue
 */
export default function useCheckDraftPost(getPost) {
  const router = useRouter();
  const [postDetail, setPostDetail] = useState(null); // 投稿データ
  const [loading, setLoading] = useState(true); // データの読み込みが完了したらFalseになる
  const redirectIfSecretParamMismatch = (secret, router) => {
    if (secret !== process.env.NEXT_PUBLIC_PREVIEW_SECRET_KEY) {
      router.push('/');
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      // ルーティングが完了し、すべてのクエリパラメータが利用可能になったタイミングで、以下の処理を実行
      if (router.isReady) {
        const { secret, slug } = router.query;
        // envで定義した値と一致しない場合、トップページへリダイレクト
        if (secret !== process.env.NEXT_PUBLIC_PREVIEW_SECRET_KEY) {
          router.push('/');
          return;
        }
        // データ取得
        const post = await getPost(
          {
            slug: slug,
            limit: '1',
          },
          true,
        );
        const postDetail = post.items[0];
        // slugに紐づくデータが無かった場合、もしくはslugパラメータが空の場合、トップページへリダイレクト
        if (!postDetail || !slug) {
          router.push('/');
          return;
        }
        setPostDetail(postDetail);
        setLoading(false);
      }
    };
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router.isReady]);

  return {
    postDetail: postDetail,
    loading: loading,
  };
}