Unhandled Runtime ErrorError: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Did not expect server HTML to contain a <a> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error이런 에러가 발생하는데초반 랜더링과 뭐가 다르거나 랜덤 데이터를 사용하면 오류가 나온다는 것 같아서 혹시 faker를 사용해서 생긴느 에러인지 궁금합니다"use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 60 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 }); return data?.map((post) => <Post key={post.postId} post={post} />); }여기에서 queryFn: getPostRecommends이 부분을 지워도 정상 작동하는데 queryFn: getPostRecommends 이것이 하는 기능이 무엇인가요?또 여기에서 Retech와 invalidate를 눌러도 트윗이 변하지 않습니다 혹시 위 에러와 관련이 있나요?

안녕하세요 제로초님,특정인 정보 api(api/users/{id}) response 관련 질문이 있습니다.response에 Followers 배열이 있어해당 유저를 팔로우 한 다른 사용자들을 얻고자 했습니다. 처음 시도는 강의에서 진행했던대로prefetchQuery + useQuery 조합으로 데이터를 끌어오고자 했습니다.하지만 이 경우에 Followers 배열이 빠진 상태로 응답이 돌아오고 있습니다.한 100번 새로고침하면 1~2번만 붙어서 옵니다.아래는 prefetchQuery + useQuery 조합 코드입니다. // page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ["user", username], queryFn: getUserInfo, }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } //Nav.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import getUserInfo from "../_lib/getUserInfo"; import BackBtn from "../../_component/BackBtn"; import { Navigation } from "./style"; import { User } from "@/model/User"; type Prop = { username: string; }; export default function Nav({ username }: Prop) { const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("네비게이션 유저 데이터 : ", data); return ( <Navigation> <BackBtn></BackBtn> {data === undefined ? ( <div>프로필</div> ) : ( <div> <div>{data?.nickname}</div> <div>0 게시물</div> </div> )} </Navigation> ); } //ProfileUserData.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import Link from "next/link"; import { useSession } from "next-auth/react"; import Tab from "./Tab"; import FollowButton from "../../_component/FollowButton"; import { ProfileUserdataMid, UserName, SignupDate, AboutFollower, ProfileUserdata, NoAccountId, NoAccountMsg, ProfileUserdataTop, AbsoluteProfileContainer } from "./style"; import { User } from "@/model/User"; import getUserInfo from "../_lib/getUserInfo"; type Prop = { username: string; }; export default function ProfileUserData({ username }: Prop) { const { data: session } = useSession(); const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("프로필 유저 데이터 : ", data); // const createdDate = new Date(data?.createdAt!); if (data === undefined) { return ( <> <NoAccountId>@{username}</NoAccountId> <NoAccountMsg>계정이 존재하지 않음</NoAccountMsg> </> ); } // return null; // 팔로우, 팔로잉 데이터 추가 필요 return ( <ProfileUserdata> <ProfileUserdataTop> <AbsoluteProfileContainer> <div>아 몰랑</div> </AbsoluteProfileContainer> {/* 팔로우 버튼 확인 */} {/* <Link href="/settings/profile">프로필 수정</Link> */} {/* {session?.user?.email === data?.id ? <Link href="/settings/profile">프로필 수정</Link> : <FollowButton user={data} />} */} </ProfileUserdataTop> <ProfileUserdataMid> <UserName> <div>{data?.nickname}</div> <div>@{data?.id}</div> </UserName> <SignupDate> <svg viewBox="0 0 24 24" aria-hidden="true" height="1.25rem"> <g> <path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"></path> </g> </svg> {/* <div>{`가입일 ${createdDate.getFullYear()}년 ${createdDate.getMonth() + 1}월`}</div> */} </SignupDate> <AboutFollower> <Link href="/follow"> <span>{data._count.Followings}</span> 팔로우 중 </Link> <Link href="/followers"> <span>{data._count.Followers}</span> 팔로워 </Link> </AboutFollower> <Tab></Tab> </ProfileUserdataMid> </ProfileUserdata> ); } react-query 결과 때문에 다른 방법으로 prefetchQuery를 사용하지 않고useQuery만을 사용해서 특정인 정보를 가져오는 시도를 했는데이 경우에는 모두 Followers 배열이 같이 날아오더군요.왜 이런 현상이 일어나는지 궁금해 질문 남깁니다.아래는 useQuery만 사용한 코드는 page.tsx에 prefetchQuery만 빠진 것 이외에 다른 부분은 동일합니다.//page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); // await queryClient.prefetchQuery({ // queryKey: ["user", username], // queryFn: getUserInfo, // }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); // 개인 사용자 데이터 가져오는 것으로 수정해ㅑ함 // 이거 서버 컴포넌트인데 Nav 같은거는 client란 말이야 그래서 깜박거리는데 어카지; return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } react - query 결과useQuery만 사용했을 때의 네트워크 탭getUserInfo.tsx는 다음과 같습니다.import { QueryFunction } from "@tanstack/query-core"; import { User } from "@/model/User"; const getUserInfo: QueryFunction<User, [_1: string, _2: string]> = async ({ queryKey }) => { const [_1, username] = queryKey; const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}`, { credentials: "include", }); if (response.ok) return response.json(); }; export default getUserInfo;   

패러렐 라우트 강의 중 폴더 이동하는 부분이 있는데i/flow/signup 페이지가 notFound로 나옵니다http://localhost:3000/ 경로에서도 해당 페이지 ui 가 나오지 않는데 어떤 문제일까요 

이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.

현재 개발하는 환경이 13 버전인데임포트가 되지 않네요

다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요.왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )

해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다

안녕하세요, 제로초님.사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다.사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데인터셉팅 라우터를 사용하기 위해선@modal/[username]이 아니라@modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1위 URL에서 새로고침을 하게되면인터셉팅 되지 않은(afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?

안녕하세요 !Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?!hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)

dependencies에 next-auth버전입니다"next-auth": "^4.24.7",오류를 보면 import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); 이게 제 코드인데 제 코드에서는 credentials 속성이 없다고 뜨는데실행해보면Unhandled Runtime ErrorError: Cannot read properties of undefined (reading 'GET')Sourcesrc/auth.ts (6:14) @ GET 4 | 5 | export const { > 6 | handlers: { GET, POST }, | ^회원가입시 이런 오류가 뜹니다오류와 대조를 하여 공식문서를 보면현재 여기 credentials의 코드가 바뀐것같은데제 코드에서 어떻게 수정을 해줘야할지 모르겠습니다.vscode자체 오류로도credentials' 속성이 '{ authorize(credentials: Record | undefined): Promise; }' 형식에 없지만 'Pick>, "credentials" | "authorize"> 형식에서 필수입니다.라고 뜨는것으로 보아 제 생각에도 공식문서에있는 credentials 속성을 넣어줘야하는것같은데 어떤식으로 해야할지 잘 모르겠습니다.route.ts 역시// api auth와 관련된 주소는 전부 nextauth가 관리 export { GET, POST } from "@/auth"; 이런식으로 잘 넣어주었구요.어떤식으로 수정을해야 GET오류가 나지 않을까요 ? 

Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다. 이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다.  TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다.여기서 질문입니다.TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다. (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지) Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다.. import { TabContext } from "../home/_component/TabProvider"; const Post = () => { const { tab } = useContext(TabContext); return ( <> <div>TabContext Value = {tab}</div> </> ); }; 

양 사이드에 flex-grow : 1; 씩 주는 방법을 처음 알게되었습니다. 이전에는 현재 구현하고자 하는 레이아웃처럼 중앙정렬 할 때, 아래 코드처럼 요소 전체를 감싸는 컨테이너에 justify-content : center;를 지정해서 정렬했었습니다. (아래 코드 첨부)레이아웃을 정확하게 중앙에 놔둘 때에는 flex-grow 및 justify-content를 선택해서 사용할 수 있을 것 같고, flex-grow는 비대칭적인 레이아웃을 구성할 때, 더 유용할 수 있겠다. 라고 생각하는데 올바른 접근일까요??.container { display: flex; align-items: stretch; background-color: #fff; justify-content: center; }

private 폴더까지 강의를 보면서 진행하다가 문득 로그인이나 계정 만들기, 모달 close button에 마우스를 가져다 대니 커서 변경이 되지 않네요.속성이 없는건가? 싶어서 보니 cursor : pointer; 는 제대로 들어가있는 것 같은데 마우스 포인터가 잘 변경되지 않아서 다른 분들은 잘 변경되시는지 궁금하네요

안녕하세요 제로초님. 강의 잘보고있습니다 강의와 관련된 질문이 아니라 죄송합니다.. 여러군데에서 찾아봐도 명쾌한 내용이 보이지 않아서 질문드립니다. 백엔드서버(spring)에서 jwt를 발급하는데, axios 인터셉터 처럼 401에러시 백엔드 jwt재발급요청을 하는방법이 Next에서 fetch함수에서는 할수가없는거 같더라고요.저가 생각한 해결법은 2가지인데 어떤게 좋을까요..?next-auth 미사용, axios사용하기fetch를 둘러싸는 customFetch()함수 정의하여 모든곳에서 사용하기

@vanilla-extract/css에서 혹시 스타일드 컴포넌트와 같이 값을 넘겨서 처리 해주는 건 없나요?! pr &.group-item { display: grid; grid-template-columns: repeat(${pr => pr.columns}, 1fr); column-gap: 30px; padding-right: ${props => (props.category === 'POSITION' ? '0px' : '30px')}; } &.group-item-half { display: grid; grid-template-columns: repeat(${pr => pr.columns}, 1fr); column-gap: 30px; padding: 0px 0px 30px 30px; &:first-of-type { padding-top: 30px; } }

NextJs를 빌드하면 .next라고 빌드 파일이 나오는 것까지 확인했는데,강의에서는 빌드 산출물을 실행시키는게 아니라 git으로 전체 프로젝트를 클론받아서 실행시키는거 같더라구요Export를 해서 out 파일이 나오는 static 실행방법은 아니에요혹시 NextJS 빌드 산출물을 실행시키는 방법이 있을까요??

저스탠드 관련해서 하다가 안풀려서 여쭤 봅니다 백엔드와 통신을 하여 값을 받아 온 객체의 값을 저스탠드에 set으로 저장 하려고 하는데 이렇게 계속 나오더라구여 ..제가 지금 하려고 했던건 인터페이스를 만들어주고 각 타입을 주려고 했는데 안되더라구여 ㅠㅠ 어떤 걸 수정을 해야 될까요 ㅠㅠ타입을 any로 하니 되긴 하던데 any는 사용 하지 말라고 하셔서 되도록 ㅠㅠ

궁금 한게 있어서 여쭤 봅니다 ㅎㅎ useMutation을 사용 하였을때 prefetchQuery의 queryKey에 데이터를 저장해 놓고 useQueryClient에 데이터를 넣어 두둣이 onSuccess를 했을때 queryKey처럼 데이터를 저장 할 수 있을까요? 저스탠드와 같은 라이브러리 없이 혹시 쿼리에서 uuseMutation을 했을때 캐쉬 값을 가지고 있을 수 있을까요?!

▲ Next.js 14.2.1 - Local: http://localhost:3000 ✓ Starting... ✓ Ready in 5.2s ○ Compiling / ... ✓ Compiled / in 5.5s (583 modules) GET / 200 in 5896ms TypeError: rt.toLowerCase is not a function at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:30:274042 at finishResolved (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:192383) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:193267 at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) ... at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:13:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:204068 at Hook.eval [as callAsync] (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bund ○ Compiling /home ...화면이 버벅거릴 정도로 에러 코드가 길어서 어쩔 수 없이 잘라서 올립니다. < 현재 상황 >npm run dev 하면 바로 TypeError: rt.toLowerCase is not a function 에러가 발생합니다.에러가 발생해도 첫 랜딩 화면은 렌더링 됩니다.그러나 주소창에 url 입력하여 페이지 이동 시 에러 코드 맨 마지막 줄 처럼 무한 로딩이 걸리고 아무 것도 안됩니다.< 시도 해 본 것>https://stackoverflow.com/questions/78321779/typeerror-rt-tolowercase-is-not-a-function-nextjs를 따라 npm 재설치 => 실패프로젝트 폴더 삭제 후 재설치 => 실패다른 구글링 자료를 보면 13버전을 사용하라고 하는데, 14버전 강의를 듣기에 적용할 수 없는 해결책 

강의 3:53초 부분에 회원가입을 하자마자 로그인을 하면 useSession에 값이 제대로 들어오지 않는다고 하셨는데 라이브러리 자체 오류인가요 아니면 onSubmit에서 회원가입 플로우 직후 redirect("/home")하는 부분이 영향을 받아서 그런건가요?