React Query 공식 문서에 보면 queryClient 인스턴스를 생성해서 바로 QueryClientProvider의 client로 넘겨주고 있는데 제로초님께서는 useState의 초기 값으로 QueryClient의 인스턴스를 생성해서 넘겨주는 방법을 사용하셨는데요. 이 두가지 방법 중에 어떤 것을 사용해야 좋을지 궁금합니다. // 공식 문서 const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) } // 제로초님 강의 function ReactQueryProvider({children} : Props) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false, } } } ) ) return <QueryClientProvider client={queryClient}></QueryClientProvider> }   

redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.

강의에서 알려주신 router.replace() 를 사용하지 않고// @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); }기존의 이 코드를 인터셉트 라우팅으로 줘서홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?

이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.

선생님이 사용하시는 IDE는 , 속성의 종류가 회색글씨로 나오는게, 마치 타입스크립트처럼 복잡하게 생각할 필요 없이 명시적으로 나와서 편해 보입니다. 혹시 vscode에서도 저런 익스텐션이 있을까요? 아니면 웹스톰을 사용하면 저게 자동으로 나오나요?

강좌 잘 따라가고 마지막 부분에서서버 띄우기 위해 터미널을 하나 더 열고 명령어를 적었습니다. 해당에러node_module파일에 msw에 내부 파일에서 Response를 참지하지 못한다는 에러가 있어서 ..브런치를 다시 지우고 작업도해보고구글링과 공식문서를 보았는데도 문제의 해결점을 찾지 못하던 중에 12시간 전에 올라온 저와 동일한 문제를 가진 사람을 발견했어요 - !https://www.reddit.com/r/nextjs/comments/1997wb3/msw_2x_and_nextjs_14_has_anyone_successfully/하지만, 이 분도 해결하지 못한거 같더라구요ㅠㅠ 현재 저의 msw버전은msw 버전 낮춰서 작업을 하는 법이 해결방법인가요 ? 또 하나의 작은 질문입니다만,현재 nodejs의 임시방편적인 코드를 사용하고 있는데서버 관련 코드를 setupServer를 사용해도 괜찮을까요 ?

안녕하세요 제목 처럼, 저는 @modal을 app경로에 생성해서 root 디렉토리의 page.tsx 와 함께 layout.tsx에 그려지길 원합니다. 그래서 저는 로그인 페이지를 따로 작성해서 가지고 있지 않고, 어느 페이지에서든지 모달창이 나오게 하고 싶습니다.

/ 로 들어갈 때 (beforeLogin) 폴더에 layout.tsx가 렌더링 되는 이유가 뭐에요?(afterLogin) 폴더 밑에도 layout.tsx가 있는데  (beforeLogin) 폴더 밑에 layout.tsx가 칠드런으로 선택되는 이유가 궁금합니다.

> duckblog@0.1.0 build> next build && next export ⚠ Invalid next.config.js options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ Unrecognized key(s) in object: 'dynamic' ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ▲ Next.js 14.0.4 ✓ Creating an optimized production build ✓ Compiled successfully ✓ Linting and checking validity of types > Build error occurredError: Page "/post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:1012:59 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async Promise.all (index 6) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:892:17 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:829:124 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async build (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:187:29) at async main (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/bin/next:157:5) next.config.js/** @type {{output: string, assetPrefix: string, experimental: {appDir: boolean}}} */ const nextConfig = { experimental: { appDir: true, }, output: "export", assetPrefix: "/duckblog/", // dynamic: "force-static", }; module.exports = nextConfig;  build시에 발생하는 에러입니다. dynamic route에서 에러가 발생하는것 같은데 깃헙이슈나 레디스에 올라와있는 방법으로도 잘 해결이 안되네요... output export 를 없애고 빌드르 하면 아래와 같은 에러가 발생합니다 The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export  

강의 로그인과 회원가입 실제로 하기 뒷부분에 트렌드조회, 팔로우, 추천게시물을 불러오기 위해 주소를 변경해주고 403이 나오는 곳은 credentials 을 추가했습니다하지만 /hashtags/trends에서만 여전히 쿠키를 받아오지 못하고 403이 나오고 있는데 어디가 잘못된건지 잘 모르겠습니다 

제로초님께서 '서버쪽에서 MSW를 자연스럽게 돌리는 방식이 아직 나오지 않았다' 라고 말씀하셨는데, 이 부분에 대해 궁금해서 자료를 찾던 중 해당 내용을 다루는 깃헙 이슈를 찾아서 읽어보았습니다.아직까지도 서버쪽에서 MSW를 사용하는 부분은 업데이트가 되지 않았다는 내용이 있어서 혼자 이것저것 건들던 도중에 http.ts 실행을 종료해도 클라이언트 쪽에서 요청을 보내면 모킹이 되어야 하는게 아닌가 하는 의문이 들었습니다.그래서 http.ts 의 실행을 종료하고 요청을 보냈으나 클라이언트 쪽에서는 404 에러가 발생하였고, 서버 쪽에서는 200 이 뜨면서 이전에 가져왔던 데이터를 가져왔습니다.여기서 제가 궁금한 것은http.ts 는 서버 모킹을 위해 추가적으로 작성된 파일이라고 생각하는데 제가 잘못 생각한 것인지 궁금합니다.http.ts 실행이 종료된 상태로 클라이언트 컴포넌트에서 요청을 보낸다면 http://localhost:3000/api/login 으로 요청을 보냈을 때 정상적으로 모킹이 되어야 한다고 생각하는데 맞게 생각한 것인지 궁금합니다. (저는 클라이언트-browser.ts, 서버-http.ts 로 모킹이 연결된다고 이해했습니다.) 제가 작성한 코드는 강의에서 작성된 코드와 같은 코드를 사용했으며 출력 부분(console.log)만 조금 수정했습니다. 좋은 강의 만들어주셔서 감사합니다.

[Nest] 19976 - 2024. 01. 15. 오전 10:37:17 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '{경로}\nest-prisma-main\nest-prisma-main\client\index.html'위와같은 에러가 발생하는데, pg세팅하고 memurai.com 에서 설치 후, redis connect 까지는 확인이 되는 것 같은데, localhost:3000/home 페이지를 가면 레이아웃을 제외한 페이지 전체가 오류가 납니다. 이때 Nexjs가 뱉어내는 오류는 입니다 현재 진행중인 노드 버전은 Node.js v20.10.0 입니다.

클라이언트 컴포넌트 안에서 서버 액션을 활용할 것이라면 서버 액션 안에다 "use server"; 를 작성하라고 했는데 그럼 서버 컴포넌트일 경우엔 굳이 "use server"를 작성할 필요 없죠?

Next.js의 Data Cache가 동작하는 부분에 대해 궁금한 것이 생겨서 또 한번 질문 드립니다ㅠ공식문서도 찾아봤는데 제가 못 찾은건지 관련 내용을 찾을 수가 없네요  아래의 코드는 Home폴더의 page.tsx 에서 prefetch + dehydrate 를 진행하고 있습니다이때는 getPostRecommends에 대해서 Next.js의 Data Cache가 제대로 동작합니다. (fetch에 어떠한 옵션도 걸어두지 않았습니다)/home URL에서 새로고침을 계속 진행해도 loading.tsx가 보이지 않으며faker.js로 랜덤한 이미지를 반환하게 설정했음에도 계속 같은 이미지를 보여주기 때문입니다 그렇지만, 아래와 같이 prefetch + dehydrate 하는 부분을 page.tsx가 아니라 TabDeciderSuspense.tsx 라는 서버 컴포넌트로 빼서 사용 할 경우이때도 getPostRecommends를 서버컴포넌트에서 fetch를 하는 것임에도, Next.js의 Data Cache가 아예 적용되지 않습니다/home URL에서 새로고침을 할 때마다 loading.tsx가 delay(3000) 동안 보여지며faker.js의 랜덤한 이미지가 계속 보여지기 때문입니다처음에는 Suspense를 사용해서 그런건가 싶었는데 사진에 올린 것처럼 Suspense를 제거했음에도 동일한 현상이 나타나는걸로 봐서는다른 부분에 원인이 있는 것 같은데 혹시 왜 이렇게 되는 것인지 알 수 있을까요?혹시 fetch하는 부분이 page.tsx에 있어야만 Data Cache가 진행되는 것인가요..? 

/login -> /i/flow/login으로 redirect 할때 next.config.js에서 const nextConfig = { async redirects() { return [ { source: "/login", destination: "/i/flow/login", permanent: true, }, ]; }, }; module.exports = nextConfig;이런식으로 코드를 짜면 redirect가 되는데 login폴더를 굳이 만들지 않고 위와 같이 설정해도 괜찮은가요?

fetch 함수가 그냥 web API 같은데fetch 함수에 next 라는 속성이 들어간건데 따로 임포트해온것도 아닌데 어떻게 작동되는건가요?next 가 내부적으로 fetch 를 새로 만든건가요?

위 사진 처럼 컴파일이 안됩니다.그리고 이렇게 바꾸고 실행을 시키면 실행은 되는데 코드 상에서 NEXT_PUBLIC_BASE_URL이 undefined로 확인이됩니다. 어떻게 해결할 수 있을까요.

안녕하세요. 강의를 보며 코드를 작성하고 있는데, auth.ts 페이지에서'{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식의 인수는 'UserCredentialsConfig<Record<string, CredentialInput>>' 형식의 매개 변수에 할당될 수 없습니다.'credentials' 속성이 '{ authorize(credentials: Record<string, string> | undefined): Promise<any>; }' 형식에 없지만 'Pick<CredentialsConfig<Record<string, CredentialInput>>, "credentials" | "authorize">' 형식에서 필수입니다.ts(2345)credentials.d.ts(12, 5): 여기서는 'credentials'이(가) 선언됩니다.(parameter) credentials: Record<string, string> | undefined이런 에러가 발생했습니다. credentials 속성을 타입과 함께 추가해주고, body에서 사용되고 있는 credentials에 ?. 연산자를 이용해 에러를 해결했는데도이러한 에러가 발생합니다.이때 500 에러가 같이 발생하는데 해당 에러도 하단에 첨부합니다.   GET http://localhost:3000/api/auth/signin 500 (Internal Server Error)processMessage @ webpack-internal:///…t-dev-client.js:233eval @ webpack-internal:///…ot-dev-client.js:55handleMessage @ webpack-internal:///…lay/websocket.js:52index.js:591 Uncaught TypeError: Cannot read properties of undefined (reading 'GET')at eval (webpack-internal:///(rsc)/./src/auth.ts:14:21)at (rsc)/./src/auth.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:182:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:6:63)at (rsc)/./src/app/api/auth/[...nextauth]/route.ts (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:172:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:17:126)at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fgoorm%2FDocuments%2Fnext%2Fy-com&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:162:1)at __webpack_require__ (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:33:43)at __webpack_exec__ (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:192:39)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:424)at __webpack_require__.X (file:///Users/goorm/Documents/next/y-com/.next/server/webpack-runtime.js:163:21)at <unknown> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:193:47)at Object.<anonymous> (file:///Users/goorm/Documents/next/y-com/.next/server/app/api/auth/[...nextauth]/route.js:196:3)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at mod.require (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require-hook.js:65:28)at require (node:internal/modules/cjs/helpers:121:18)at requirePage (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/require.js:109:84)at <unknown> (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:84)at async loadComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/load-components.js:59:26)at async DevServer.findPageComponentsImpl (file:///Users/goorm/Documents/next/y-com/node_modules/next/dist/server/next-server.js:671:36)getServerError @ client.js:417eval @ index.js:591setTimeout (async)hydrate @ index.js:579await in hydrate (async)pageBootrap @ page-bootstrap.js:24eval @ next-dev.js:25Promise.then (async)eval @ next-dev.js:23./node_modules/next/dist/client/next-dev.js @ main.js?ts=1704985593164:192options.factory @ webpack.js?ts=1704985593164:716__webpack_require__ @ webpack.js?ts=1704985593164:37__webpack_exec__ @ main.js?ts=1704985593164:1259(anonymous) @ main.js?ts=1704985593164:1260webpackJsonpCallback @ webpack.js?ts=1704985593164:1388(anonymous) @ main.js?ts=1704985593164:9Show 6 more framesShow lesswebsocket.js:46 [HMR] connected확인하시기 쉽게 같은 내용의 사진과 함께 올려드립니다.그리고 강의 내용 이외의 credentials 관련 코드를 추가하기 전인 auth.ts 파일의 코드도 첨부드립니다.import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; 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.AUTH_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(); return user; }, }), ], }); chap3-1의 auth.ts 코드를 복붙해도 에러가 해결되지 않아 무엇이 원인인지 모르겠습니다. 도움을 주신다면 정말 감사하겠습니다...

백엔드 서버에서는 소켓에서 메시지를 받으면 DB에 따로 저장하는 식으로 관리가 되는걸까요?? 아니면 프론트의 저장 공간에 저장하는 방식으로도 해결하는 방법이 있을까요??

병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다.예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때/product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고,모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는/product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다.이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요?더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.