PagesRouterに移行 (#227)

## Issue

- Github Issue: #201 

## 変更内容
- AppRouterからPagesRouterに移行しました。

@coderabbitai: ignore

next.config.js

@@ -18,6 +18,49 @@ const nextConfig = {
  transform: '@mui/lab/{{member}}',
  },
  },
+ headers: async () => {
+ return [
+ {
+ source: '/(.*)',
+ headers: [
+ {
+ key: 'Cache-Control',
+ value: 's-maxage=86400, stale-while-revalidate=86400',
+ },
+ {
+ key: 'X-DEBUG',
+ value: 'all',
+ },
+ ],
+ },
+ {
+ source: '/:username',
+ headers: [
+ {
+ key: 'Cache-Control',
+ value: 's-maxage=86400, stale-while-revalidate=86400',
+ },
+ {
+ key: 'X-DEBUG',
+ value: 'username',
+ },
+ ],
+ },
+ {
+ source: '/:username/posts/:postId',
+ headers: [
+ {
+ key: 'Cache-Control',
+ value: 's-maxage=86400, stale-while-revalidate=86400',
+ },
+ {
+ key: 'X-DEBUG',
+ value: 'post',
+ },
+ ],
+ },
+ ];
+ },
 };
 
 module.exports = withPWA(nextConfig);

package.json

@@ -25,6 +25,7 @@
  "@ducanh2912/next-pwa": "10.2.2",
  "@emotion/cache": "11.11.0",
  "@emotion/react": "11.11.3",
+ "@emotion/server": "11.11.0",
  "@emotion/styled": "11.11.0",
  "@mui/icons-material": "5.15.5",
  "@mui/lab": "5.0.0-alpha.161",

src/app/(menu)/(private)/home/_components/HomeTimeline.tsx → src/_app/(menu)/(private)/home/_components/HomeTimeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useHomeTimeline } from '@/swr/client/timeline';
-import Timeline from '@/app/(menu)/_components/timeline/Timeline';
+import Timeline from '@/_app/(menu)/_components/timeline/Timeline';
 
 /**
  * ホームタイムライン

src/app/(menu)/(private)/invitations/_components/Invitations.tsx → src/_app/(menu)/(private)/invitations/_components/Invitations.tsx

@@ -12,9 +12,9 @@ import {
 import { useInvitationCreate, useInvitations } from '@/swr/client/invitations';
 import { useEffect, useState } from 'react';
 import { Invitation } from '@cuculus/cuculus-api/dist/models/Invitation';
-import Loading from '@/app/(menu)/_components/main/Loading';
+import Loading from '@/_app/(menu)/_components/main/Loading';
 import { ContentCopy } from '@mui/icons-material';
-import LoadingButton from '@/app/_components/button/LoadingButton';
+import LoadingButton from '@/_app/_components/button/LoadingButton';
 
 const Root = styled('div')`
  display: flex;

src/_app/(menu)/(private)/layout.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { ReactNode } from 'react';
+import PrivateRoute from '@/_app/_components/auth/PrivateRoute';
+
+export default function Layout({ children }: { children: ReactNode }) {
+ return <PrivateRoute showLoadingScreen={false}>{children}</PrivateRoute>;
+}

src/app/(menu)/(public)/[username]/_components/ProfilePage.tsx → src/_app/(menu)/(public)/[username]/_components/ProfilePage.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
-import ProfileCard from '@/app/(menu)/(public)/[username]/_components/layouts/ProfileCard';
+import PrimaryColumn from '@/_app/(menu)/_components/main/PrimaryColumn';
+import ProfileCard from '@/_app/(menu)/(public)/[username]/_components/layouts/ProfileCard';
 import { useUser } from '@/swr/client/user';
-import UserTimeline from '@/app/(menu)/(public)/[username]/_components/UserTimeline';
+import UserTimeline from '@/_app/(menu)/(public)/[username]/_components/UserTimeline';
 import { UserWithFollows } from '@cuculus/cuculus-api';
 import { useAuth } from '@/swr/client/auth';
 

src/app/(menu)/(public)/[username]/_components/UserTimeline.tsx → src/_app/(menu)/(public)/[username]/_components/UserTimeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useUserPosts } from '@/swr/client/user';
-import Timeline from '@/app/(menu)/_components/timeline/Timeline';
+import Timeline from '@/_app/(menu)/_components/timeline/Timeline';
 import { UserWithFollows } from '@cuculus/cuculus-api';
 
 /**

src/app/(menu)/(public)/[username]/_components/elements/FollowButton.tsx → src/_app/(menu)/(public)/[username]/_components/elements/FollowButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import CapsuleButton from '@/app/_components/button/CapsuleButton';
+import CapsuleButton from '@/_app/_components/button/CapsuleButton';
 
 type Props = {
  userId: number;

src/app/(menu)/(public)/[username]/_components/layouts/EditProfileButton.tsx → src/_app/(menu)/(public)/[username]/_components/layouts/EditProfileButton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import CapsuleButton from '@/app/_components/button/CapsuleButton';
-import ProfileSettingModal from '@/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal';
+import CapsuleButton from '@/_app/_components/button/CapsuleButton';
+import ProfileSettingModal from '@/_app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal';
 import { useState } from 'react';
 import { useProfile } from '@/swr/client/auth';
 

src/app/(menu)/(public)/[username]/_components/layouts/ProfileCard.tsx → src/_app/(menu)/(public)/[username]/_components/layouts/ProfileCard.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { Box, Typography, styled } from '@mui/material';
-import { FollowButton } from '@/app/(menu)/(public)/[username]/_components/elements/FollowButton';
-import UserCount from '@/app/(menu)/(public)/[username]/_components/elements/UserCount';
+import { FollowButton } from '@/_app/(menu)/(public)/[username]/_components/elements/FollowButton';
+import UserCount from '@/_app/(menu)/(public)/[username]/_components/elements/UserCount';
 import { usePathname } from 'next/navigation';
-import HeaderImage from '@/app/(menu)/(public)/[username]/_components/elements/HeaderImage';
-import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/UserIcon';
+import HeaderImage from '@/_app/(menu)/(public)/[username]/_components/elements/HeaderImage';
+import UserIcon from '@/_app/(menu)/(public)/[username]/_components/elements/UserIcon';
 import { UserWithFollows } from '@cuculus/cuculus-api';
-import { EditProfileButton } from '@/app/(menu)/(public)/[username]/_components/layouts/EditProfileButton';
+import { EditProfileButton } from '@/_app/(menu)/(public)/[username]/_components/layouts/EditProfileButton';
 
 const UnselectableCard = styled('div')`
  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[100]};

src/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal.tsx → src/_app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal.tsx

@@ -17,14 +17,14 @@ import {
  ZoomIn,
  ZoomOut,
 } from '@mui/icons-material';
-import { IconButton } from '@/app/_components/button/IconButton';
-import HeaderImage from '@/app/(menu)/(public)/[username]/_components/elements/HeaderImage';
-import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/UserIcon';
+import { IconButton } from '@/_app/_components/button/IconButton';
+import HeaderImage from '@/_app/(menu)/(public)/[username]/_components/elements/HeaderImage';
+import UserIcon from '@/_app/(menu)/(public)/[username]/_components/elements/UserIcon';
 import Cropper, { Area, Point } from 'react-easy-crop';
-import CapsuleButton from '@/app/_components/button/CapsuleButton';
-import { getCroppedImg } from '@/app/(menu)/(public)/[username]/_utils/cropImage';
+import CapsuleButton from '@/_app/_components/button/CapsuleButton';
+import { getCroppedImg } from '@/_app/(menu)/(public)/[username]/_utils/cropImage';
 import { useProfileMutation } from '@/swr/client/profile';
-import CapsuleLoadingButton from '@/app/_components/button/CapsuleLoadingButton';
+import CapsuleLoadingButton from '@/_app/_components/button/CapsuleLoadingButton';
 
 const HEADER_HEIGHT = '50px';
 const SLIDER_HEIGHT = '50px';

src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx → src/_app/(menu)/(public)/[username]/posts/_components/PostPage.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
+import PrimaryColumn from '@/_app/(menu)/_components/main/PrimaryColumn';
 import { UserPost } from '@cuculus/cuculus-api';
 import { usePost } from '@/swr/client/post';
-import Post from '@/app/(menu)/_components/timeline/layouts/Post';
+import Post from '@/_app/(menu)/_components/timeline/layouts/Post';
 
 type Props = {
  postId: string;