안녕하세요! 언제나 멋진 강의 감사드립니다. 다름이 아니라, 프로젝트를 Vercel에 배포하는 과정에서 아래와 같은 컴파일 실패 에러가 빌드 로그에서 검출되어서 이에 대해 여쭤보고 싶습니다. 화면 상에서는 src/app/(with-searchbar)/search/page.tsx 에 선언한 generateMetaData 함수가 Next.js 페이지의 요구조건을 충족시키지 못한다라는 내용으로 보여지는데요, 이런 경우에는 해당 요소에서 어떤 부분을 확인해볼 수 있을까요? 해당 페이지에 대한 코드도 함께 첨부해 드리겠습니다. \app\(with-searchbar)\search\page.tsx import BookItem from "@/components/book-item"; import BookListSkeleton from "@/components/skeleton/book-list-skeleton"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Metadata } from "next"; import { Suspense } from "react"; //index 페이지와 다르게 search 페이지는 QueryString과 같은 동적인 값에 의존하고 있기 때문에 static 페이지로는 설정할 수 없지만, 데이터 캐시를 최대한 이용하는 것으로 최적화 async function SearchResult({q}:{q:string}) { await delay(2000); const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`, {cache: "force-cache"} ); if(!response.ok){ return <div>오류가 발생했습니다 ...</div> } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } //현재 페이지의 메타데이터를 동적으로 생성하는 함수 export async function generateMetaData({ searchParams, }: { searchParams: Promise<{q?: string}>; }): Promise<Metadata> { const {q} = await searchParams; return { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, openGraph: { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, images: ["/thumbnail.png"], } } } export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const {q} = await searchParams; return ( <Suspense key={q || ""} fallback={<BookListSkeleton count={3} />}> <SearchResult q={q ||""} /> </Suspense>); }
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 지금까지 알려주신 내용에서 Notion 통해 글을 추가/삭제했을 때, 그에 대한 반영이 이루어지기 위해 unstable_cache 적용 시 revalidate 옵션(단위: s(초))을 줘야 하는 것을 확인했습니다. (getPublishedPosts 구현부분에서 언급되지 않은부분이라 강의내용과 공식문서 토대로 동작 확인했습니다.) Notion이 아닌 실제 페이지에서 글쓰기를 했을 때는 revalidateTag 함수를 호출하여 캐시를 무효화시켰었습니다. 문제는 목록 가져올때도 매번 revalidateTag 함수를 사용하게 된다면 캐시 사용하는게 무의미해질거라 생각합니다. 즉시 반영을 위해서는 Webhook 연동이 필요해보이나, 생각보다 구현 난이도가 복잡해서 revalidate를 적절하게 주는게 좋을거라 생각했습니다. 그렇다면 효율적인 revalidate 값은 어느정도로 지정하는게 좋을까요?? TanStack Query ClientProvider에서 지정한 것처럼 1분 정도가 적절하려나요?? 그리고 실제 구현 이루어지는 프로그램(ex. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.
eas build --platform android --profile preview --local --local 플래그로 로컬에서 빌드해서 테스트 해보고 있습니다. EXPO_PUBLIC_FRONT_URL EXPO_PUBLIC 접두사를 붙여서 환경변수 넣어두었고 Alert.alert("uri", process.env.EXPO_PUBLIC_FRONT_URL); 위처럼 Alert 로 체크해보니 비어있었습니다 로컬로 빌드할시에 더 셋팅해줘야 하는 부분이 있을까요?
firebase 프로젝트 생성하고 설정하고 있는데 Authentication > 로그인방법 설정중에 어느 방법을 선택해도 아래 이미지와 같이 업데이트 오류라는 문구가 뜨고 저장이 안됩니다. 데이터베이스 만들기 과정에서도 '위치'란에 아무 select박스가 안뜹니다. 프로젝트 생성은 영상과 동일하게 하였는데 프로젝트가 제대로 생성이 안된건지 문제가 뭔지 모르겠습니다.
2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요! 하나 궁금한 게 생겨서 질문 남겨요! 20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요? 해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요! submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?
eas submit --platform ios Select a build from EAS ❯ Provide a URL to the app archive Provide a path to a local app binary file Provide a build ID to identify a build on EAS 이렇게 뜹니다 어떻게해야하나요?
앱 빌드 중에 문제가 생겨 문의드립니다. 아래 알려주신 명령어를 입력하면 로컬이 아니라 expo.dev 사이트에서 앱이 빌드 되는 것을 확인 했습니다. 무료 계정 기준으로 빌드 시간이 30분~1시간 소요됩니다... npx eas build --platfo rm android --profile development 바쁘시겠지만 로컬에서 빌드하고 AVD에 설치하는 과정을 알려주시면 감사하겠습니다. 저와 같은 문제가 발생하시는 분들은 npm run android 또는 npm run ios 를 입력하시면 앱이 설치가 됩니다. 이게 정석인지는 잘 모르겠습니다..
안녕하세요 Next app router 관련해서 질문드립니다. 현재 사이드프로젝트에서 route handler를 적극활용하고 있는데요. 제가 인프라나 백엔드 관련 지식이 없다보니 좀 헷갈리는게 있습니다. 현재 저희 서비스에서 특정 API는 클라이언트 컴포넌트에서 route handler로 API 호출 -> route handler에서 외부 백엔드 API 호출 이런 형태로 사용되고 있는데요, 이때 실제로 route handler 서버가 아래의 사진 중 어느 형태로 운용되는 것인가요? 즉, Next 프로젝트를 배포했을 때 각 유저마다 route handler 서버가 할당되는 것인가요? 아니면 모든 유저의 요청을 오직 하나의 route handler서버에서 대응하는 것인가요? 아니면 이게 배포 환경에 따라 달라지는것인가요?
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 강의 잘 듣고 있습니다. 제가 혼자 실습하다가 createPostAction 의 반환값에 success 필드를 넣은 후에 useActionState 의 initialState 에도 이 필드를 아래와 같이 추가했었는데요, const [state, formAction, isPending] = useActionState(createPostAction, { message: '', errors: {}, formData: { title: '', tag: '', content: '', }, success: false, }); useActionState 훅을 사용할 때 initialState 에 포함된 필드 중 일부를 이후 action 함수의 반환값에서 생략하면 어떤 경우에는 에러가 발생하고, 어떤 경우에는 아무 문제 없이 동작하는 게 잘 이해가 되지 않아서요. 예를 들어 initialState 에는 success 필드가 있지만, 유효성 검사 실패 시 반환 객체에서 success 를 생략하면 에러가 발생합니다. if (!validatedFields.success) { return { errors: validatedFields.error.flatten().fieldErrors, message: 'Validation failed', formData: rawFormData, success: false, // 없으면 useActionState 에서 에러 발생 }; } 그런데 try...catch 문에서는 success 없이 반환하면 에러가 발생하지 않는 걸 확인할 수 있었습니다. try { const { title, tag, content } = validatedFields.data; await createPost({ title, tag, content }); revalidateTag('posts'); return { success: true, // 없어도 에러 안남 message: 'Post created successfully', }; } catch (e) { return { message: 'Failed to create post : ' + e, formData: rawFormData, }; } formData 필드도 비슷하게 행동하는데 이 차이가 왜 발생하는지, 어떤 기준으로 반환 객체의 필드 구조를 검사하고 에러를 발생시키는지 궁금합니다. useActionState 에서 반환 객체의 필드가 initialState 와 구조적으로 정확히 일치해야 하는 조건이 언제 적용되는 건가요?
[auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror [auth][cause]: Error: The edge runtime does not support Node.js 'crypto' module. Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime at Object.get (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\_b7b28d92._.js:62:41) at C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8637:62 at getSecret (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8620:20) at push.[project]/node_modules/.pnpm/jsonwebtoken@9.0.2/node_modules/jsonwebtoken/verify.js [middleware-edge] (ecmascript).module.exports (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:8623:12) at Object.decode (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\[root-of-the-server]__273b5c62._.js:135:233) at session (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:4516:39) at AuthInternal (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:5123:269) at async Auth (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\0253f_@auth_core_77718842._.js:5379:34) at async handleAuth (C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\node_modules__pnpm_e56295b8._.js:3885:29) at async C:\project\whatsForLunch\basic-app\frontend\.next\server\edge\chunks\_b7b28d92._.js:12505:20 [auth][details]: {} GET / 200 in 137ms auth.ts에 jwt: { encode: async ({ token, secret }) => { return jwt.sign(token as jwt.JwtPayload, secret as string); }, decode: async ({ token, secret }) => { return jwt.verify(token as string, secret as string) as JWT; }, }, 이 부분을 추가한 이후부터 The edge runtime does not support Node.js 'crypto' module. 이 에러가 발생하는데 해결이 어렵네요.. 코드는 노션이랑 강의 보고 다 비교해 봤는데 드른 부분은 없었스빈다..
