// 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({ credentials: { username: { label: "Username", type: "text", placeholder: "jsmith" }, password: { label: "Password", type: "password" }, }, 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(); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // route.ts export { GET, POST } from "@/auth"; 각종 커뮤니티 글을 보긴했지만,, 해당 에러는 보이지 않아서 문의 남깁니다.  서버쪽 에러는 [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:31:38) at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:241:39) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:127:34) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55759 at async eO.execute (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527) at async eO.handle (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57093) at async doRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1345:42) at async cacheEntry.responseCache.get.routeKind (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1555:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1901:24) at async DevServer.renderToResponseImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1939:32) at async DevServer.pipeImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:914:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/next-server.js:272:17) at async DevServer.handleRequestImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:810:17) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:339:20 at async Span.traceAsyncFn (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/trace/trace.js:154:20) at async DevServer.handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:336:24) at async invokeRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:173:21) at async handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:350:24) at async requestHandlerImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:374:13) at async Server.requestListener (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/start-server.js:141:13)[auth][details]: { "code": "ECONNREFUSED", "provider": "credentials"}이렇게 발생하고 있습니다. 신 버전인 만큼 .env AUTH_SECRET=woong작성 해놨고 .env local 같은 경우는 NEXT_PUBLIC_API_MOCKING=enabledNEXT_PUBLIC_BASE_URL=http://localhost:9090작성해놨습니다. 잘 해결이 안되서 글 남깁니다. 

안녕하세요CSR 경험만 있다보니, 프론트 서버에 로그인한다는 개념이 뭔가 와닿지가 않아서요백엔드 서버에 쿠키로 인증이 되는데, 왜 프론트 서버에 로그인하는게 필요할까요?클라이언트 사이드만 있을 때랑 뭔가 다른 느낌이네요..ㅠ

login버튼을 클릭했을 때 처음에 login페이지에 갔다가 replace로 인해서 i/flow/login으로 갈 때 인터셉팅 라우팅이 적용되어 페러렐 라우트를 사용한 (.)i/flow/login으로 이동하게 되는것 까지 이해하고 적용을 시켰고 이동은 잘 하지만 아래와 같은 에러가 발생합니다.아래는 저의 LoginModal.tsx 코드입니다."use client"; import { useState } from "react"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(); const [password, setPassword] = useState(); const [message, setMessage] = useState(); const router = useRouter(); const onSubmit = () => {}; const onClickClose = () => { router.back(); }; const onChangeId = () => {}; const onChangePassword = () => {}; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 저의 폴더 구조는 아래와 같습니다. 

login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다.  개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요??아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); } 

안녕하세요 제로초님. 강의 잘 보고 있습니다. <img src={photo.link} alt={photo.Post?.content} /><div className={style.image} style={{backgroundImage: `url(${photo.link})`}} />여기서 css를 보니 img에 display none을 주고 div에 style의 bg로 이미지를 주셨던데 왜 이렇게 하신건지 특별한 이유가 있나요? 궁금합니다.

병렬 라우팅에 문제가 있는 거 같아 문의 드립니다.강의 그대로 패러렐 라우트, 인터셉터 라우트까지 모두 따라했었는데,"Application error: a client-side exception has occurred (see the browser console for more information)."브라우저에 이런 에러가 뜨면서, 콘솔창에는 아래와 같이 에러가 뜨더라구요.app-index.js:33 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)window.console.error @ app-index.js:33Show 1 more frameShow lessUnderstand this errorreact-dom.development.js:9126 Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this errorapp-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler. 그래서 어디서 난 에러인지 추리려고 인터셉터 라우트 부분은 아예 빼버리고,패러랠 라우트 부분으로 확인해보는데, 패러랠 라우트 부분부터 아예 에러가 나서 이것이 문제인 거 같더라구요. { "name": "z-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "classnames": "^2.5.1", "dayjs": "^1.11.13", "next": "14.2.11", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8.4.47", "tailwindcss": "^3.4.12", "typescript": "^5" } }  package.json과 디렉토리 구조는 이런 상태이구요.@modal/compose/tweet/page.tsx@modal/compose/tweet/modal.module.css@modal/default.tsx이 세 파일은 깃헙 ch2-2 에 나온대로 그대로 적었습니다. import {ReactNode} from "react"; import style from '@/app/(afterLogin)/layout.module.css'; import Link from "next/link"; import Image from "next/image"; import ZLogo from '../../../public/zlogo.png'; import NavMenu from "@/app/(afterLogin)/_component/NavMenu"; import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; // import RightSearchZone from "@/app/(afterLogin)/_component/RightSearchZone"; type Props = { children: ReactNode, modal: ReactNode } export default function AfterLoginLayout({ children, modal }: Props) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}> <div className={style.leftSectionFixed}> <Link className={style.logo} href="/home"> <div className={style.logoPill}> <Image src={ZLogo} alt="z.com로고" width={40} height={40} /> </div> </Link> <nav> <ul> <NavMenu /> </ul> <Link href="/compose/tweet" className={style.postButton}> <span>게시하기dd</span> {/* <svg viewBox="0 0 24 24" aria-hidden="true" className="r-jwli3a r-4qtqp9 r-yyyyoo r-1472mwg r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"></path></g></svg> */} </Link> </nav> <LogoutButton /> </div> </section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}> {/* <RightSearchZone /> */} <TrendSection /> <div className={style.followRecommend}> <h3>팔로우 추천</h3> <FollowRecommend /> <FollowRecommend /> <FollowRecommend /> </div> </section> </div> </div> {modal} </div> ) }layout.tsx도 위에 코드와 같이 거의 그대로 적었구요. 참고로 layout.tsx에서 console.log(modal) 했을 때, undefined 뜹니다.근데 또 explore로 이동한 뒤 게시하기 버튼을 누르면 modal이 뜹니다.이것 저것 다해보다가 도저히 안풀려서 문의드립니다.제가 어디서 놓친 걸까요...  

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, } }, }), ] });@/auth.ts 파일 코드입니다. 이런식으로 에러가 나서 에러 창을 확인해보면 전달된 매개변수의 타입이 적절치 않다고 하는데, 강의 그대로 따라가면서 깃허브 참고하면서 코드를 작성했음에도 불구하고 오류가 나옵니다..

안녕하세요 제로초님 강의를 듣다가 문득 궁금한점이 있어서 질문드립니다.현재 폴더 구조가 app하위에 (afterLogin) 폴더와 (beforeLogin) 폴더가 있는데, 지금 강의에서는 당연한듯이 beforeLogin 폴더의 layout이 뜨고있는데요, 왜 그런건지 궁금합니다.현재 단계에서는 뭔가 로그인을 했다는 조건같은걸 아직 작성하지 않은것 같아서요 정리하자면 현재 localhost:3000의 기본 페이지가afterlogin 폴더의 layout이 아니라 beforeloign의 layout이 뜨는 이유가 궁금합니다.

안녕하세요강의 잘 보고 있습니다. 한가지 질문이 있는데요! 라우팅 테스트 중에 (beforeLogin) 하위로 추가 생성되는 라우트는 Link로 접속하면 잘 되는데, 직접 URL로 치고 가면 not-found 페이지가 뜨는데어떤 이유일까요 ? 질문1)아래 이미지의 itest 폴더 인터셉팅 잘됨. 하지만 새로고침 하거나 직접 localhost:3000/itest 치고 들어가면 페이지 없음. (원래는 새로고침 시 page.tsx 내용이 보여야 하지 않나요?) 질문2)테스트겸 localhost:3000/dkwlsWK 라우트를 생성해서 직접 URL치고 들어가니 역시 없는 페이지로 뜹니다.혹시 (그룹핑) 하거나 페레럴을 사용한 것과 연관이 있을까요 ?  질문3)아래 이미지 중 @modal/(.)itest 에 default.tsx 로 하면 에러가 나더라구요! (page.tsx로 하면 괜찮지만 페이지를 찾을 수 없음)

안녕하세요.강의를 복습하다가 캐싱 기능에 대해 질문이 생겼습니다.  Next에서 fetch의 cache: 'force-cache'를 설정하면, 데이터가 공적 캐싱으로 처리된다고 알고 있습니다. 여기서 게시판을 예로 들어보면,게시물을 새로 포스팅하면 전체 게시물 목록을 갱신해야 하기 때문에 서버에서는 cache: 'no-store'를 설정하여 항상 최신 데이터를 가져오고, 클라이언트에서는 qn을 이용해서 staleTime을 설정하여 데이터를 일정 시간 동안 캐싱하고 있습니다. "force-cache"와 "useQuery" 내 두 번의 캐싱이 발생하여 비 효율적일 수 있다고 생각되어 cache: 'no-store'를 사용하여 클라이언트에서만 캐싱하고 있었는데요. 생각해보니 fetch를 이용해서 공적으로 캐싱하는게 성능적으로 우월할거 같아서 "force-cache"로 변경하고 invalidateQueries를 이용하여 클라이언트에서 post되면 데이터를 갱신하도록 변경하고 테스트를 해보았는데 잘되는게 이해가 되질 않습니다. 서버는 초기 항상 캐싱된 데이터를 반환하기 때문에 데이터가 상이할줄 알았는데 터미널을 봐도 post하고 리스트를 갱신할때만 Api 호출하고 이후엔 캐싱된 데이터를 잘 사용합니다.  이 경우, 사용자가 데이터를 갱신하면 서버의 캐시가 자동으로 업데이트되고, 공적 캐싱을 사용하여 효율적으로 데이터를 관리할 수 있는 건가요?      

안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다. 로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다.. 정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다..보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ

▲ Next.js 14.2.8 - Local: http://localhost:3000 - Environments: .env ✓ Starting... ✓ Ready in 4.2s ○ Compiling / ... ✓ Compiled / in 3.5s (1022 modules) GET / 200 in 4384ms GET / 200 in 81ms ✓ Compiled /api/auth/[...nextauth] in 364ms (493 modules) GET /api/auth/session 200 in 2386ms ○ Compiling /login ... ✓ Compiled /login in 1020ms (1035 modules) GET /api/auth/session 200 in 1561ms GET /login?_rsc=1pqm1 200 in 126ms ○ Compiling /(.)i/flow/login ... ✓ Compiled /(.)i/flow/login in 731ms (1050 modules) GET /api/auth/providers 200 in 44ms GET /api/auth/csrf 200 in 19ms [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: TypeError: Failed to parse URL from undefined/api/login at node:internal/deps/undici/undici:13178:13 [auth][details]: { "code": "ERR_INVALID_URL", "input": "undefined/api/login", "provider": "credentials" } POST /api/auth/callback/credentials? 200 in 40ms GET /api/auth/session 200 in 26ms윈도우 인데 memurai설치가 도저히 안 되어서 그냥 redis 설치했습니다. 백엔드 코드 실행시키면 redis connected라고도 뜨고, service에도 실행중도 뜨고, hello world도 잘 뜹니다.REDIS_URL=redis://127.0.0.1:6379 //백엔드 env NEXT_PUBLIC_BASE_URL=http://localhost:3000 //z-com 에 있는 .env이거로도 고쳐봤습니다. localhost:3000/login 여기로 넘어는 가는데 로그인이 안 됩니다.깃허브에서 코드 잘 가져왔고, 회원가입도 잘 되는데 로그인만 안 됩니다. 뭐가 문제일까요 ㅠㅠ

안녕하세요 강의를 듣고 next-auth를 활용하여 개발 중에 궁금한 점이 생겨 질문 드립니다.프로젝트에서 일반 로그인과 소셜 로그인을 모두 사용하고 있어next-auth의 signin callback에서 로그인일 경우 자체 서버에 요청하여 accessToken과 refreshToken을 발급 받고 jwt callback에서 엑세스 토큰의 만료 시간을 체크하여 만료 시에 재발급 요청이 되도록 구현하고 있습니다.이렇게 구현했을 경우 간헐적으로 서버 시간과의 타이밍 이슈 때문인지 api 요청 시에 401 토큰 만료 에러가 발생하는 순간이 존재합니다.따라서 401 상태코드일 경우에 refreshToken 토큰 재발급 요청을 하려고 하는데 refreshToken이 현재 next-auth에서 jwt 콜백에서 리턴되어 jwt토큰으로 생성되어 있습니다.이 401일 경우 재발급 요청 처리를 클라이언트 단에서 할 경우 refreshToken이 노출되어 보안상 이슈가 있을 것으로 예상이 되는데 서버단에서 처리를 하려면 next에서 어디서 처리를 하면 좋을 지 문의드립니다. async signIn({ account, user, credentials }) { const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const action = authorizationParams.action; user.platform = authorizationParams.platform; if (!account?.provider || !sns_type_map[account.provider]) { throw new Error("Unsupported provider"); } user.snsType = sns_type_map[account.provider]; if (action === auth_action_type.signin) { return handleSignIn(user); // getAccessToken } if (action === auth_action_type.signup) { return handleSignUp(); } return false; }, async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { ...token, ...user, accessToken: user.refreshToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: "refreshtoken", }; } // Return previous token if the access token has not expired yet if (new Date() < new Date(token.expiresAt as string)) { console.log("@@@@@@valid"); return token; } else { // Access token has expired, try to update it console.log("@@@@@@expired"); const cookieStore = cookies(); const authorizationParams = JSON.parse( cookieStore.get("authorization-params")?.value ?? "" ); const body = { .... }; const tokenData = await authApi.reissueAccessToken(body); // reissue token return { ...token, ...user, accessToken: tokenData.accessToken, expiresAt: new Date( Date.now() + (tokenData.expiresIn ?? 0) ).toISOString(), refreshToken: tokenData.refreshToken, }; } }, 미들웨어에서 401 상태 코드 처리하는 것도 알아보았으나 일반적인 방식인지 궁금합니다.미들웨어에서 401일때 재발급 요청 시 새로운 엑세스 토큰으로 재요청이 정상적으로 되는 것은 확인했으나 다시 next-auth의 jwt토큰에 재발급된 값을 세팅해줘야 하는데 어떻게 해야할지도 궁금합니다.import { NextResponse } from 'next/server'; import { getToken } from 'next-auth/jwt'; export async function middleware(request) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET }); if (request.nextUrl.pathname.startsWith('/gateway')) { const accessToken = token?.accessToken; const headers = new Headers(request.headers); if (response.status === 401) { const refreshToken = token?.refreshToken; const refreshResponse = await fetch("/reissueToken") const refreshData = await refreshResponse.json(); if (refreshResponse.ok) { const newAccessToken = refreshData.accessToken; headers.set('Authorization', `Bearer ${newAccessToken}`); const newResponse = NextResponse.next({ request: { headers: request.headers, }, }); } // 토큰 재발급 실패 시 처리 return NextResponse.redirect('/login'); } return NextResponse.next(response); } return NextResponse.next(); }    

결국 next js 에서만 http.ts 를 만들어주어서 express 서버로 mock server(?)를 직접 띄우는 형식인것 같은데 맞나요? 또 제 생각에는 이렇게 msw 를 사용하면, 내가 백엔드 서버로 요청을 보내도 그 요청을 중간에 가로채서 mock api 로 요청이가고 내가만든 가짜응답을 보내주는것이 되어야 할것같은데, 지금은 저희가 띄운 9090으로 요청을 보내고 있네요. (이 내용도 맞는지 궁금합니다, next 프로젝트가 아니라면 localhost:8888(실제 나의 백엔드 서버)로 요청을 보냈다고 가정할때 msw가 요청을 가로채가나요?)그렇다면 굳이 msw 를 사용하는 이유가 무얼까요..? 혼자 express 서버를 만들어서 가짜응답 전해주는것과 차이를 모르겠습니다..!감사합니다

강의에서 svg 복사하는 방법을 알려줬는데 어디 강의인지 기억이 나지 않아서 질문합니다.알려주세요 ㅠ

Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다.  header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.

안녕하세요. useQuery로 가져온 data가 console로 찍어보면 두번찍히는데 왜 렌더링이 두번도는지 알 수 있을까요?

안녕하세요 제로초님 새소식에 throw CredentialsSignin을 해서 next-auth 프론트에서 서버 에러 받기 부분을 하고 있는데throw CredentialsSignin을 하면 저는 서버 주소 localhost:9090/0/i/flow/login?error=... 으로 리다이렉트됩니다. 위 경로를 프론트 주소 localhost:3000으로 수정하려면 어디서 변경해야 하나요?

안녕하세요 복습중에 있는데 검색해도 잘모르는내용이라 내용 적어봅니다.넥스트를 배우려는 큰이유중 하나가 SEO 때문인데 넥스트에서 metadata 페이지마다 꼬박꼬박 잘적고 (title ,desc)시맨태그 최대한 이용해서 마크업하면 끝인가요 ?넥스트 내에서 더 해줘야하는 작업이라던가.. 그런게 있을까요 ? (구글 서치콘솔 이런거 말고.. 개발자가 코드 작업시에 놓치면안되는 요구 SEO 작업이 궁금해서요 )

초보적인질문입니다. src기준이니깐 @못쓴다면 public 기준은 ../../../../ 이런식으루 사용해야할까요 ?