import { type NextRequest, NextResponse } from 'next/server'; import { fetchData } from '@/shared/apis/fetch-data'; import type { IAcademyCreateDTO, IPostEnrollAcademyResponse } from '@/shared/types/acadmy'; export async function POST(req: NextRequest) { const body = (await req.json()) as Promise<IAcademyCreateDTO>; const data = await fetchData<IPostEnrollAcademyResponse>('/api/v1/academies', 'POST', body); if (!data.isSuccess) { return NextResponse.json( {}, { status: 500, statusText: data.message, }, ); } return NextResponse.json(data); }서버에, 에러시 아래와 같은 데이터 구조를 준다고 했을떄 위의 방식처럼, 에러 핸들링을 하는 것이 맞는지 궁금합니다... Route Handler의 보편적인 에러처리 방식이 너무 궁금합니다!! (직접 에러 메시지를 작성하는것이 아닌 서버에서 내려주는 에러메시지를 화면에 표기하고 싶습니다.)export type CommonResponse<T = unknown> = { code: string; isSuccess: boolean; message: string; result: T; };

안녕하세요 next-auth로 토큰 갱신 로직을 개발하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다.현재 클라이언트에서 api 요청을 하면 middleware에서 const token = await auth(); 이런식으로 세션 정보를 가져와 accessToken을 헤더에 삽입하는 방식을 구현하였습니다. if (request.nextUrl.pathname.startsWith("/gateway")) { const session = await auth(); const accessToken = session?.accessToken; const { device } = userAgent(request); const localeFromCookie = cookieStore.get("dp_lang")?.value as string; const defaultLocale = getLanguageCodeFromLocale(localeFromCookie); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("deviceId", getDeviceIdFromCookie(cookieStore)); request.headers.set("osType", getOsTypeFromCookie(cookieStore)); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: { headers: request.headers, }, }); return response; } 따라서 미들웨어에서 세션에 접근하는 순간에 jwt콜백이 실행되어 jwt 토큰에 저장되어 있는 토큰 expire 시간을 비교하여 만료여부를 판단 한 뒤에 토큰 갱신이 되도록 구현을 하였습니다. async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { accessToken: user.accessToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: user.refreshToken, serviceAvailable: true, }; } // Return previous token if the access token has not expired yet if ( new Date() < new Date(new Date(token.expiresAt as string).getTime() - 5000) ) { console.log("@@@@@@valid"); return token; } else { if (token.error === "RefreshTokenInvalid") { return token; } // Access token has expired, try tㄴo update it try { console.log("@@@@@@expired"); const refreshedTokens = await authApi.refreshAuthToken({ refreshToken: token.refreshToken as string, accessToken: token.accessToken as string, }); console.log("==========token refreshed========"); // reissue token return { ...token, accessToken: refreshedTokens.accessToken, expiresAt: new Date( Date.now() + (refreshedTokens.expiresIn ?? 18000) ).toISOString(), refreshToken: refreshedTokens.refreshToken ?? token.refreshToken, error: null, }; } catch (error) { console.error("Token refresh failed", error); if (error.status === RestApiErrorType.invalidTokenException) { return { ...token, error: "RefreshTokenInvalid", }; } return { ...token, error: "RefreshAccessTokenError" }; } } }, 기존에는 세션에 접근을 할때 next-auth의 jwt 콜백이 돌고 값이 리턴되면 쿠키의 session-token값에 암호화된 값들이 업데이트 되는 걸로 알고 있었는데 찾아보니 현재 세션에 접근하고 갱신하는 부분이 서버단에 있어서 쿠키가 업데이트 되지 않는다고 합니다. 따라서 현재 토큰이 만료된 후 한번에 3가지의 api 콜을 요청했을때 첫번째 api요청에서는 정상적으로 토큰 refresh가 요청이 되며 middleware에서 세션에 접근해 갱신된 토큰이 가져와져 요청이 성공되나 그 뒤 요청부터는 쿠키에 업데이트가 되지 않아서인지 세션에서 갱신 전 토큰이 가져와지는 현상이 발생하고 있습니다.클라이언트에서 세션 업데이트 후 세션에 접근을 해야 쿠키값이 갱신이 된다고 하는데 다른 방법이 있는지 문의드립니다.

안녕하세요.컴포넌트 스트리밍 적용하기에서 searchParams가 Promise 값을 반환하는 형태로 바뀌었는데요.Suspense에서 key 값을 어떻게 처리하나요?searchParams 자체는 비동기 처리하는 함수를 분리해서 검색이 가능하게는 처리가능한데 Suspense는 마땅한 방법이 없어보여서 질문 드려봅니다.searchParams: Promise<{ q?: string; }>;

const messageContainer = document.querySelector("#d-day-message"); const container = document.querySelector("#d-day-container"); container.style.display = 'none' messageContainer.innerHTML = "<h3>D-Day를 입력해 주세요</h3>"; const dateForMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; //const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; // console.log(inputYear, inputDate, inputMonth); }; const counterMaker = function () { const targetDateInput = dateForMaker(); // console.log(targetDateInput); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; // 만약 remaining이 0이라면 , 타이머가 종료 되었습니다 출력 (수도코드) console.log(remaining); if (remaining === 0 || remaining < 0) { // console.log("타이머가 종료되었습니다"); messageContainer.innerHTML = "<h3>타이머가 종료되었습니다</h3>"; } else if (isNaN(remaining)) { // 만약 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다 출력 // console.log("유효한 시간대가 아닙니다"); messageContainer.innerHTML = "<h3>유효한 시간대가 아닙니다</h3>"; } // const remainingDate = Math.floor(remaining / 3600 / 24); //Math. floor 소숫점 제거 // const remaingHours = Math.floor(remaining / 3600) % 24; // const remaingMin = Math.floor(remaining / 60) % 60; // const remaingSec = Math.floor(remaining) % 60; const remaingObj = { remainingDate: Math.floor(remaining / 3600 / 24), remaingHours: Math.floor(remaining / 3600) % 24, remaingMin: Math.floor(remaining / 60) % 60, remaingSec: Math.floor(remaining) % 60, }; // const days = document.getElementById("days"); // const hours = document.getElementById("hours"); // const min = document.getElementById("min"); // const sec = document.getElementById("sec"); // const documentObj = { // days: document.getElementById("days"), // hours: document.getElementById("hours"), // min: document.getElementById("min"), // sec: document.getElementById("sec"), // }; const documentArr = ['days', 'hours', 'min' , 'sec'] // const docKeys = Object.keys(documentObj); const timeKeys = Object.keys(remaingObj); // Object.keys : 객체의 키를 가져와 배열로 반환f let i = 0; for (let tag of documentArr) { // 배열로 이용한다 document.getElementById(tag).textContent = remaingObj[timeKeys[i]] i++ } const starter = function () { container.style.display ='flex' messageContainer.style.display = 'none' counterMaker() } // for (let i = 0; i < timeKeys.length; i = i + 1) { for문 // documentObj[docKeys[i]].textContent = remaingObj[timeKeys[i]]; // // console.log(timeKeys); // // console.log(timeKeys[i]); // } // let i = 0; // for (let key in documentObj) { // 객체로 이용한다 for in // documentObj[key].textContent = remaingObj[timeKeys [i]] // i++; // } // documentObj['days'].textContent = remaingObj["remainingDate"]; // documentObj['hours'].textContent = remaingObj["remaingHours"]; // documentObj['min'].textContent = remaingObj["remaingMin"]; // documentObj['sec'].textContent = remaingObj["remaingSec"]; // console.log("클릭"); // console.log(remainingDate, remaingHours, remaingMin, remaingSec); };<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./main.css" /> <!-- <script src="./script.js" defer></script> --> <title>Document</title> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="d-day-message"></div> <div id="target-selector"> <input type="text" id="target-year-input" class="target-input" / size="5"> <input type="text" id="target-month-input" class="target-input" / size="5"> <input type="text" id="target-date-input" class="target-input" / size="5"> </div> <button onclick="starter()" id="start-btn">카운트 다운 시작</button> <script src="./script.js"></script> </body> </html>아무리 호출하고 수정해도 계속 오류가 납니다 이유 좀 알려주세요 ㅠ

안녕하세요 프로젝트 진행 중에 해결되지 않는 부분이 있어 질문 드립니다.middleware에서 쿠키의 값을 업데이트 하려고 하는데 업데이트 되지 않는 현상이 발생하고 있습니다.아래의 코드와 같이 NextResponse.next() 실행 후에 response에 쿠키를 업데이트를 하려 하는데 반영이 되지 않습니다. request에서 세팅해도 마찬가지입니다. 쿠키 세팅이 되지 않는 원인에 대해 알고 계신가요?? export default async function middleware(request: NextAuthRequest) { if (request.nextUrl.pathname.startsWith("/gateway")) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET as string, secureCookie: process.env.NODE_ENV === "production", }); const accessToken = token?.accessToken; const { device } = userAgent(request); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: request.headers }); response.cookies.set("test", "test"); return response; } ... }

const weatherSearch = function (position) { fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&exclude={part}&appid=b53e0e301571ed81576201a2a4fee23b` ); }; const accessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, longitude: position.coords.longitude, }; weatherSearch(positionObj); console.log(position.latitude); }; const askForLocation = function () { navigator.geolocation.getCurrentPosition(accessToGeo, (err) => { console.log(err); }); }; askForLocation();위 코드 13번째 줄에서console.log(position.latitude);를 하면저는 undefined가 출력되고,console.log(position.coords.latitude);를 해야위도 값이 나오는데...강사님께서는 console.log(position.latitude); 라고 코드를 작성하셨는데,위도 값이 잘 나오더라고요.. 이게 왜 그런지 별건 아니지만 궁금해서 질문남깁니다!

섹션 11의 이미지 성능 최적화 강의에서 Next.js의 이미지 성능 최적화에 대해 설명하실 때의 강의 코드가 <Image /> 컴포넌트가 아닌 <img /> 요소인데도 이미지 성능 최적화가 잘 되는 것을 보았습니다. 그럼 굳이 <img /> 요소 대신 <Imgae /> 컴포넌트를 사용해야 하는 이유가 있나요?

무한 스크롤 구현 중에, 스크롤을 내리면 자연스럽게 다음 페이지로 이어지는 게 아니라, 한번 아래로 내려갔다가 다시 스크롤했던 위치로 돌아옵니다. 이 문제는 어떻게 해결할 수 있을까요?

안녕하세요 :) 섹션 9 부분을 다 듣고 나서 명확히 이해가 가지 않는 부분이 있어 질문드립니다. getServerSideProps를 이용하여 페이지를 로딩할 때는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 프론트 서버(Next.js 서버)이고,useEffect를 이용하여 페이지를 로딩할 때는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 클라이언트(브라우저)라고 이해하는게 맞을까요?

강사님 안녕하세요.학습을 거의 끝낸 상태라 거의 마지막 질문이 될 것 같기도 한데요^^클라이언트 컴포넌트는 서버 컴포넌트를 Import 할 수 없기 떄문에 Next 는 서버 컴포넌트를 클라이언트 컴포넌트로 동작시킨다고 배웠습니다.그런데 만약 이러한 서버 컴포넌트에 async 방식의 api 코드가 포함되어 있는 경우에는 이런 코드가 클라이언트 방식으로 동작하면 문제가 발생할 것 같은데요.결국, 이런 상황에서는 서버 컴포넌트를 그대로 두어서는 안되고 강의에서 설명하신 합성 방식으로 변경을 하거나 아니면 해당 서버 컴포넌트의 API 로직을 react-query 나 useEffect 훅을 이용해서 실행될 수 있는 클라이언트 컴포넌트로 리팩토링을 해야만 되는거 같은데 제가 올바로 이해한 게 맞을까요?

/app/(with-searchbar)/page.tsx/app/layout.tsx터미널 첨부한 사진과 같이 수업내용에 따라 코드를 작성하였고, 선생님의 화면과는 다르게 저렇게 같은 GET 호출이 두번이 나오네요... 옵션을 따로 추가하는것으로 바뀌었을까요??npm run dev를 껐다가 다시 실행해도 마찬가지의 결과가 나옵니다!

const onClickHot = () => { setCurrent('hot'); router.replace(`/search?q=${searchParams.get('q')}`) }  이 코드가 있으면 q=null일때 주소가 http://localhost:3000/search?q=null이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠?null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ

안녕하세요.책 데이터를 불러오지 못해서 문의 드립니다.스웨거에서도 아무 데이터를 못 불러오는데 혹시 어떤 문제일까요? npx prisma db push 도 잘 완료 하였고백엔드 서버도 start 해 놓은 상태입니다.

강사님, 안녕하세요.강의를 들으면서 살짝 혼란스러운 부분이 있습니다.사실 Next.js 도 바탕은 React 인데요.React 에서 제일 많이 언급되고 중요시되는 부분은 상태(state)관리라고 생각이 되는데Next.js 로 SSR 위주의 페이지를 작성하게 되면 결국 상태관리는 최소화하게 되는 것인데이게 React 의 컨셉과 맞는 것인지 살짝 이해가 되지 않습니다.(강의에서도 state 는 거의 언급이 되지 않고요) 그렇다고 상태관리를 최대한 활용하는 CSR 위주의 개발을 하게 되면 Next.js 의 장점을 거의 얻지 못하게 될 것 같기도 하고요.저는 Next.js 가 제공하는 프레임워크 측면의 혜택을 얻고자 Next.js 로 어플리케이션 구축을 해보고 싶은데 해당 어플리케이션이 CSR 의 비중이 적지 않을 것 같아서 좀 망설여지는 부분이 있습니다. 현대 애플리케이션들은 사용자들과의 상호작용이 적을 수가 없을텐데 대다수의 앱들이 Next.js 의 SSR 위주의 개발로 충분히 커버가 가능한 것일까요? 

postgres 강의 중 docker compose up을 실행하면 아래와 같이 오류가 뜹니다.version: "3" services: db: image: postgres: latest container_name: postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/datayml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다! 

Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?

부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 localhost에 아래와 같이 오류가 뜹니다.오류 메시지가 [id].tsx 파일에 아래와 같이 뜨긴 하는데 강의 중 강사님 화면에도 그렇고 강의 자료에도 똑같이 오류 메시지(빨간 줄)가 있더라구요. next13부터 라우팅 방식이 달라졌다고 하던데 버전 문제인건지...아래 params 오류 제외하고는 모두 동일한 소스 코드를 작성했고 오류도 없습니다.해결 방법이 궁금합니다. **혹시 몰라서 [id].tsx 랑 post.ts 코드 전체 첨부합니다.<id.tsx>import React from 'react' import Head from 'next/head' import { GetStaticPaths, GetStaticProps } from 'next' import { getAllPostIds, getPostData, getSortedPostsData } from '../../lib/post' const Post = ({postData}: { postData: { title: string date: string contentHtml: string } }) => { return ( <div> <Head> <title>{postData.title}</title> </Head> <article> <h1>{postData.title}</h1> <div> {postData.date} </div> <div dangerouslySetInnerHTML={{__html: postData.contentHtml}} /> </article> </div> ) } export default Post export const getStaticPath: GetStaticPaths =async () => { const paths = getAllPostIds(); return{ paths, fallback: false } } export const getStaticProps: GetStaticProps =async ({params}) => { const postData = await getPostData(params.id as string) return { props: { postData } } }<post.ts>import fs from 'fs' import path from 'path' import matter from 'gray-matter' import { remark } from 'remark'; import remarkHtml from 'remark-html/lib'; const postsDirectory = path.join(process.cwd(), 'posts') console.log('process.cwd()', process.cwd()); console.log('postsDirectory.cwd()', postsDirectory); export function getSortedPostsData(){ //Get file names under /posts const fileNames = fs.readdirSync(postsDirectory) console.log('fileNames', fileNames); //fileNames ['pre-rendering.md', 'ssg-ssr.md'] const allPostsData = fileNames.map(fileName => { //Remove ".md" from file name to get id const id = fileName.replace(/\.md$/, '') //Read markdown file as string const fullPath = path.join(postsDirectory, fileName) const fileContents = fs.readFileSync(fullPath, 'utf8') //Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) //Combine the data with the id return{ id, ...(matterResult.data as {date: string; title: string}) } }) //Sort posts by date return allPostsData.sort((a,b) => { if(a.date<b.date){ return 1 } else{ return -1 } }) } export function getAllPostIds(){ const fileNames = fs.readdirSync(postsDirectory); return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) } export async function getPostData(id: string){ const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf-8') const matterResult = matter(fileContents); const processedContent = await remark().use(remarkHtml).process(matterResult.content); const contentHtml = processedContent.toString(); return { id, contentHtml, ...(matterResult.data as {date: string; title: string}) } }

안녕하세요, app router에 대해 계속 공부하다가 route handlers 에 대한 궁금증이 해결되지 않아 질문하게 됐습니다. Next app router에서 정확히 route handlers를 사용해야 하는 이유가 무엇인가요?제가 생각했을 땐 서버 데이터 캐싱이나 API 엔드포인트를 숨길 수 있다는 장점이 있는데 이건 서버 컴포넌트에서 fetch하는 것으로도 대체가 되는데 route handlers를 사용해야 하는 특별한 이유가 따로 있는 것인가요? 모든 API를 route handlers로 하면 Next서버에 부하가 걸릴텐데 어떻게 해결할 수 있을까요? 이 부분은 공식문서에서 제가 못 찾은 것 같은데, 만약 외부 백엔드 API가 있고 여기에 데이터 요청을 할 때클라이언트 컴포넌트에서의 모든 API 요청을 1차로 route handler에 하고 여기서 외부 백엔드 API로 요청하게되면 route handlers에 요청이 몰리게 되는데 이때 Next 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?

안녕하세요.[id].tsx 소스인데요 .. fetch를 2씩 호출되는 걸까요? ㅠ2번째 호출될때는 id 값에 undefinded 로 되어서 페이지 오류가 발생됩니다 ㅠㅠ뭐가 잘못 된것일까요?캡쳐 보내드립니다. 

// [country]/layout.tsx const SUPPORTED_LANGS = ['kr', 'us']; interface LangMap { [key: string]: string; } const LANG_MAP: LangMap = { kr: 'ko', us: 'en' }; export function generateStaticParams() { return SUPPORTED_LANGS.map(country => ({country})); } export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, params, }: { children: React.ReactNode; params: { country: string }; }) { return ( <html lang={LANG_MAP[params.country]}> <body> <TanstackQueryProvider> <div className='container'> <BannerWrap/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); }import Banner from "@/component/Banner"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { fetchBanner } from "@/fetch/getReviews"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; export default function BannerWrap () { const queryClient = getQueryClient(); queryClient.prefetchQuery({ queryKey:['banners'], queryFn: fetchBanner, }) return ( <HydrationBoundary state={dehydrate(queryClient)}> <Banner /> </HydrationBoundary> ) } 빌드 후 next start로 테스트 중 의문점이 들어서 질문드립니다!generateStaticParams 와 fetch의 revalidate 10초, tanstackQuery staleTime 10초 로 설정후RootLayout 에서 BannerWrap에 prefetchQuery와 HydrationBoundary 를 통하여 data를 prefetch하고있는데 이게 layout이 전역에서 실행되서 그런지 생성된 페이지 개수만큼 요청을 날리는데 next에서는 같은 요청이 중복되지 않도록 요청을 캐시하고 중복 요청을 제거 한다고 배웠는데이렇게 중복으로 요청하는 이유는 뭘까요?