next.config.mjs

import { withSentryConfig } from '@sentry/nextjs';
import withPWAInit from '@ducanh2912/next-pwa';

const withPWA = withPWAInit({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
  // キャッシュ戦略
  runtimeCaching: [
    // Mapbox静的アセット（スタイル、フォント、スプライト）
    {
      urlPattern: /^https:\/\/api\.mapbox\.com\/(styles|fonts|sprites)\/.*$/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'mapbox-static-assets',
        expiration: {
          maxEntries: 300,
          maxAgeSeconds: 30 * 24 * 60 * 60 // 30日
        }
      }
    },
    // Mapboxベクトルタイル
    {
      urlPattern: /^https:\/\/api\.mapbox\.com\/v4\/.*\.vector\.pbf/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'mapbox-tiles',
        expiration: {
          maxEntries: 500,
          maxAgeSeconds: 30 * 24 * 60 * 60 // 30日
        }
      }
    },
    // Mapboxラスタータイル（画像タイル）
    {
      urlPattern: /^https:\/\/api\.mapbox\.com\/.*\.(png|jpg|jpeg)$/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'mapbox-raster-tiles',
        expiration: {
          maxEntries: 500,
          maxAgeSeconds: 30 * 24 * 60 * 60 // 30日
        }
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        expiration: {
          maxEntries: 4,
          maxAgeSeconds: 365 * 24 * 60 * 60 // 1年
        }
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'google-fonts-stylesheets',
        expiration: {
          maxEntries: 4,
          maxAgeSeconds: 7 * 24 * 60 * 60 // 1週間
        }
      }
    },
    {
      urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'static-font-assets',
        expiration: {
          maxEntries: 4,
          maxAgeSeconds: 7 * 24 * 60 * 60 // 1週間
        }
      }
    },
    {
      urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'static-image-assets',
        expiration: {
          maxEntries: 64,
          maxAgeSeconds: 24 * 60 * 60 // 24時間
        }
      }
    },
    {
      urlPattern: /\/_next\/image\?url=.+$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'next-image',
        expiration: {
          maxEntries: 64,
          maxAgeSeconds: 24 * 60 * 60 // 24時間
        }
      }
    },
    {
      urlPattern: /\.(?:mp3|wav|ogg)$/i,
      handler: 'CacheFirst',
      options: {
        rangeRequests: true,
        cacheName: 'static-audio-assets',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 24 * 60 * 60 // 24時間
        }
      }
    },
    {
      urlPattern: /\.(?:mp4)$/i,
      handler: 'CacheFirst',
      options: {
        rangeRequests: true,
        cacheName: 'static-video-assets',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 24 * 60 * 60 // 24時間
        }
      }
    },
    {
      // Next.jsの静的JSファイル（ハッシュ付き）は長期キャッシュOK
      urlPattern: /\/_next\/static\/.+\.js$/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'next-static-js-assets',
        expiration: {
          maxEntries: 64,
          maxAgeSeconds: 365 * 24 * 60 * 60 // 1年（ハッシュが変わるため安全）
        }
      }
    },
    {
      // その他のJSファイルは短期キャッシュ
      urlPattern: /\.(?:js)$/i,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'static-js-assets',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 60 * 60 // 1時間（デプロイ後に更新されるように）
        },
        networkTimeoutSeconds: 5
      }
    },
    {
      // Next.jsの静的CSSファイル（ハッシュ付き）は長期キャッシュOK
      urlPattern: /\/_next\/static\/.+\.css$/i,
      handler: 'CacheFirst',
      options: {
        cacheName: 'next-static-css-assets',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 365 * 24 * 60 * 60 // 1年（ハッシュが変わるため安全）
        }
      }
    },
    {
      // その他のCSSファイルは短期キャッシュ
      urlPattern: /\.(?:css|less)$/i,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'static-style-assets',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 60 * 60 // 1時間
        },
        networkTimeoutSeconds: 5
      }
    },
    {
      // 車中泊スポット一覧・地図データ - StaleWhileRevalidate（即座に表示、バックグラウンド更新）
      urlPattern: /\/_next\/data\/.+\/shachu-haku\.json$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'shachu-haku-list-data',
        expiration: {
          maxEntries: 500,
          maxAgeSeconds: 30 * 60 // 30分
        }
      }
    },
    {
      // 車中泊スポット詳細データ - StaleWhileRevalidate
      urlPattern: /\/_next\/data\/.+\/shachu-haku\/.+\.json$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'shachu-haku-detail-data',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 60 // 30分
        }
      }
    },
    {
      // 旅程一覧データ - StaleWhileRevalidate（即座に表示、バックグラウンド更新）
      urlPattern: /\/_next\/data\/.+\/itineraries\.json$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'itinerary-list-data',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60 // 1日
        }
      }
    },
    {
      // 旅程詳細データ - StaleWhileRevalidate（1日キャッシュ）
      urlPattern: /\/_next\/data\/.+\/itineraries\/.+\.json$/i,
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'itinerary-detail-data',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60 // 1日
        }
      }
    },
    {
      // その他のNext.jsデータ - NetworkFirst（既存の動作維持）
      urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'next-data',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 60 // 1分のみ（頻繁に更新される可能性があるため）
        },
        networkTimeoutSeconds: 5
      }
    },
    {
      // 車中泊スポット一覧API - StaleWhileRevalidate
      urlPattern: /\/api\/camping-spots\/?$/i,
      handler: 'StaleWhileRevalidate',
      method: 'GET',
      options: {
        cacheName: 'shachu-haku-list-api',
        expiration: {
          maxEntries: 500,
          maxAgeSeconds: 30 * 60 // 30分
        }
      }
    },
    {
      // その他の車中泊スポットAPI - StaleWhileRevalidate
      urlPattern: /\/api\/camping-spots\/.+$/i,
      handler: 'StaleWhileRevalidate',
      method: 'GET',
      options: {
        cacheName: 'shachu-haku-detail-api',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 60 // 30分
        }
      }
    },
    {
      // 旅程API - StaleWhileRevalidate（1日キャッシュ）
      urlPattern: /\/api\/itineraries\/.*$/i,
      handler: 'StaleWhileRevalidate',
      method: 'GET',
      options: {
        cacheName: 'itinerary-api',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 24 * 60 * 60 // 1日
        }
      }
    },
    {
      // その他のAPI - NetworkFirst（既存の動作維持）
      urlPattern: /\/api\/.*$/i,
      handler: 'NetworkFirst',
      method: 'GET',
      options: {
        cacheName: 'apis',
        expiration: {
          maxEntries: 16,
          maxAgeSeconds: 5 * 60 // 5分（APIは新鮮なデータを返すべき）
        },
        networkTimeoutSeconds: 10 // 10秒でタイムアウト後、キャッシュを使用
      }
    },
    {
      // HTMLページはネットワーク優先で短期キャッシュ
      urlPattern: ({ request, url }) => {
        // HTMLドキュメントのみマッチ（Accept: text/html）
        return request.destination === 'document';
      },
      handler: 'NetworkFirst',
      options: {
        cacheName: 'pages',
        expiration: {
          maxEntries: 32,
          maxAgeSeconds: 60 // 1分のみ（新デプロイ後すぐ更新されるように）
        },
        networkTimeoutSeconds: 5
      }
    }
  ]
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: '4mb',
    },
  },
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'tabi-no-shiori.vercel.app',
          },
        ],
        destination: 'https://tabi.over40web.club/:path*',
        permanent: true,
      },
    ];
  },
};

export default withSentryConfig(withPWA(nextConfig), {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: 'shoji-makino',
  project: 'tabi-no-shiori',
  sentryUrl: 'https://sentry.io/',

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,

  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true,
  },

  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
  // This can increase your server load as well as your hosting bill.
  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
  // side errors will fail.
  tunnelRoute: '/monitoring',

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,
});