인프런 커뮤니티 질문&답변
작성한 질문수
인터셉팅 라우트에서 메타데이터를 적용할수 없는가요?
작성
·
124
0
안녕하세요 선생님
유저정보를 모달창으로 보여주게 하기위해
아래와같이 user를 사용해서 적용했었습니다.
처음 만들었을때 메타데이터도 유저정보에 맞게 변경시켜줘야하는데 인터셉팅 라우터를 사용하면 메타데이터를 적용하지 못한다는 걸 어디서 본거같아서 테스트해보고 적용했었습니다. (user 폴더)
그리고나서 테스트를 하던중에 ux가 어색한거같아서 다시 검색해보니 인터셉팅라우트에서 메타데이터 적용하는 부분을 했다는 사람도 있는것 같더라구요 그래서 (.)tester 폴더를 만들어서 실험해봤는데 메타데이터가 적용 안되서
혹시 선생님은 인터셉트 라우트에서 메타데이터를 적용하는 방법을 아실까해서 여쭤봅니다!
📦@modal
┣ 📂(.)promise
┃ ┗ 📂form
┃ ┃ ┗ 📜page.tsx
┣ 📂(.)tester
┃ ┣ 📂[userId]
┃ ┃ ┣ 📂_component
┃ ┃ ┃ ┣ 📜UserDetailContent.tsx
┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx
┃ ┃ ┃ ┣ 📜UserDetailTop.tsx
┃ ┃ ┃ ┣ 📜UserInfo.tsx
┃ ┃ ┃ ┗ 📜UsrCarousel.tsx
┃ ┃ ┣ 📂_lib
┃ ┃ ┃ ┣ 📜getSingleUser.ts
┃ ┃ ┃ ┗ 📜getUserPromise.ts
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx
┃ ┗ 📜default.tsx
┣ 📂user
┃ ┗ 📂[userId]
┃ ┃ ┣ 📂_component
┃ ┃ ┃ ┣ 📜UserDetailContent.tsx
┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx
┃ ┃ ┃ ┣ 📜UserDetailTop.tsx
┃ ┃ ┃ ┣ 📜UserInfo.tsx
┃ ┃ ┃ ┗ 📜UsrCarousel.tsx
┃ ┃ ┣ 📂_lib
┃ ┃ ┃ ┣ 📜getSingleUser.ts
┃ ┃ ┃ ┗ 📜getUserPromise.ts
┃ ┃ ┗ 📜page.tsx
┗ 📜default.tsx시도했던 방법은
1. page.tsx에서 직접 generateMetadata를 사용.
layout.tsx를 만들고 거기에 generateMetadata를 사용후 page.tsx를 children으로 받기
여유되실때 확인해주시면 정말 감사하겠습니다!
답변 1
0
import Modal from '@/app/(afterLogin)/_component/Modal';
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
import { getSingleUser } from './_lib/getSingleUser';
import UserDetailContent from './_component/UserDetailContent';
import { getUserPromise } from './_lib/getUserPromise';
import { auth } from '@/auth';
import { Metadata } from 'next';
// export async function generateMetadata({ params: {userId} }: Props) {
// console.log(userId, '---------------------------------------------tester params');
// return {
// title: userId,
// };
// }
export const metadata: Metadata = {
title: 'aaaaaaaaaaaaaaaaaaaaa',
};
type Props = { params: { userId: string } };
export default async function UserPage({ params }: Props) {
const { userId } = params;
const queryClient = new QueryClient();
await queryClient.prefetchQuery({queryKey: ['users', userId], queryFn: getSingleUser});
const dehydratedState = dehydrate(queryClient);
const session = await auth();
return (
<HydrationBoundary state={dehydratedState}>
<Modal>
<UserDetailContent userId={userId} session={session} />
</Modal>
</HydrationBoundary>
)
}@modal/(.)tester/[userId]/page.tsx에서 위와같이 metadata를 적용했는데 상위의 메타데이터가 적용되고 있습니다.
(ex: /tester/12)
혹시 코드 중에 수정해야할 부분이 있거나 다른 부분을 봐야할 부분이 있다면 조언해주시면 감사하겠습니다.
최상단 layout.tsx에 적용한 메타데이터 입니다.
@/app/layout.tsx
import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { MSWComponent } from './_component/MSWComponent';
import AuthSession from './_component/AuthSession';
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: {
template: '%s | MBTI',
default: 'MBTI가 어떻게 되세요?',
},
description: "MBTI로 찾는 내 인연",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
<MSWComponent />
<AuthSession>
{children}
</AuthSession>
</body>
</html>
);
}
@/app/(afterLogin)/@modal/(.)tester/[userId]/paget.tsx 에서
위의 댓글처럼 메타데이터를 적용하더라도,
기본값인 'MBTI가 어떻게 되세요?'가 적용되고 있습니다.
import Modal from '@/app/(afterLogin)/_component/Modal';
import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
import { getSingleUser } from './_lib/getSingleUser';
import UserDetailContent from './_component/UserDetailContent';
import { getUserPromise } from './_lib/getUserPromise';
import { auth } from '@/auth';
export async function generateMetadata({ params: {userId} }: Props) {
console.log(userId, '---------------------------------------------tester params');
return {
title: userId,
};
}
type Props = { params: { userId: string } };
export default async function UserPage({ params }: Props) {
const { userId } = params;
const queryClient = new QueryClient();
await queryClient.prefetchQuery({queryKey: ['users', userId], queryFn: getSingleUser});
const dehydratedState = dehydrate(queryClient);
const session = await auth();
return (
<HydrationBoundary state={dehydratedState}>
<Modal>
<UserDetailContent userId={userId} session={session} />
</Modal>
</HydrationBoundary>
)
}혹시 더 확인해야할 부분이 있다면 조언해주시면 감사하겠습니다.
적용이 안되고 있는것 같습니다. ㅠ
작동이 안된다는게 prop로 받은 값은 잘 확인되는데
타이틀에 적용했을때 (혹은 임의의 다른문자) 메타데이터 적용이 안되고 있습니다.
export async function generateMetadata({ params: {userId} }: Props) {
console.log(userId, '---------------------------------------------tester params');
return {
title: userId,
};
}
(.)tester 폴더가 @modal폴더와 동일선상에 있는 tester 폴더를 인터셉팅한 상황입니다.
인터셉팅라우터도 메타데이터가 되는게 맞다면 제가 잘못 코딩한거겠군요.
감사합니다 좀더 검색해보고 실수한 부분이 있거나 다른 방법이 있는지 찾아보도록 하겠습니다.
답변 감사합니다!