인터셉팅 라우트에서 메타데이터를 적용할수 없는가요?
198
작성한 질문수 40
안녕하세요 선생님
유저정보를 모달창으로 보여주게 하기위해
아래와같이 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
뭐가 뭐를 인터셉팅한 상황인건가요? 저는 올바른 인터셉팅 라우터가 보이지 않습니다. 인터셉팅라우터도 메타데이터 되는게맞습니다.
0
(.)tester 폴더가 @modal폴더와 동일선상에 있는 tester 폴더를 인터셉팅한 상황입니다.
인터셉팅라우터도 메타데이터가 되는게 맞다면 제가 잘못 코딩한거겠군요.
감사합니다 좀더 검색해보고 실수한 부분이 있거나 다른 방법이 있는지 찾아보도록 하겠습니다.
답변 감사합니다!
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)
혹시 코드 중에 수정해야할 부분이 있거나 다른 부분을 봐야할 부분이 있다면 조언해주시면 감사하겠습니다.
0
최상단 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>
)
}혹시 더 확인해야할 부분이 있다면 조언해주시면 감사하겠습니다.
0
적용이 안되고 있는것 같습니다. ㅠ
작동이 안된다는게 prop로 받은 값은 잘 확인되는데
타이틀에 적용했을때 (혹은 임의의 다른문자) 메타데이터 적용이 안되고 있습니다.
export async function generateMetadata({ params: {userId} }: Props) {
console.log(userId, '---------------------------------------------tester params');
return {
title: userId,
};
}캡처링부분 질문있습니다.
0
77
2
깃에 소스코드를 찾을 수 없습니다.
0
115
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
99
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
112
2
css 라이브러리 추천 부탁드립니다
0
142
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
134
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
120
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
173
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
189
3
폴링이 필요없는 이유
0
94
2
next Request Memoization과 react cache
0
111
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
85
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
174
2
프레임워크 여론 파악법
0
126
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
104
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
104
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
67
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
133
2
next.js 에서 로그인에 관하여
0
140
1
Next의 route handler에 대한 질문이 있습니다.
0
102
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
101
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
86
2
vanilla-extract 못찾는 문제
0
231
2
fetch 캐싱과 revalidate 관련
0
87
2