묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
next auth 질문
1.next auth core를 설치하는 이유가 있을까요 ?prisma를 사용중인데 beta 버전을 설치하면 prisma adapter와 호환성이 안된다고 하는데 4버전을 사용해도 될까요?4버전 사용시 export const {auth} 와 같은 코드가 호환될까요?그리고 middleware 에서 session이 아닌 getToken 으로 토큰을 불러와도 상관 없을까요 ?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
ISR 구현에 궁금한 점이 있습니다.
안녕하세요.강의 정말 재밌게 보고 있습니다. 딱 두 가지 몇번을 돌려봐도 궁금증이 풀리지 않아 문의드립니다.(* Page Router 를 사용하는 Next 14버전 기준)1) ISR 질문ISR은 기본적으로 SSR의 형태라고 생각 되는데(빌드 타임에 페이지를 생성해놓는것이..)일정 시간을 두고 페이지를 재 생성 한다는 게 이해가 안 갑니다.. 이미 빌드를 마치고 서버에 배포를 했다고 가정하고(제가 원래 백엔드 개발자라..)그 후에 페이지가 서버에서 재 생성되면 빌드가 다시 한번 이뤄지는건가요..?(빌드가 계속해서 이뤄질수는 없을텐데..) 아니면 처음에는 미리 생성 된 페이지를 전달해주고 이후로는 SSR 형태로페이지가 생성되는걸까요? 데이터가 계속 최신으로 변경 되니전체 페이지가 SSG일수는 없을거고(처음 요청에 응답한 페이지만 미리 생성된 페이지일텐데) 초기 SSG에 변경된 데이터만 SSR형식으로 만들어지는 건지..상식적으로 리빌드가 계속 될일은 없는데 페이지가 새로 생성이 된다고하니빌드를 안 했는데 페이지가 생성될수 있나 싶고..제가 너무 틀에 갖혀서.. 2) 동적 페이지 + SSG 방식으로 렌더링하기이것도 비슷한 결의 질문인 것 같은데요 fallback 옵션을 true로 했을 때 서버에서 필요한 작업을 마치면,그 이후로는 캐싱이 되어서 없던 요청에 대한 페이지가반쪽짜리 SSG에서 완전한 SSG로 작동하는건지 궁금합니다. 그리고 만약 캐싱이 되는게 맞다면 서버에서 캐싱이 되는걸까요? 추운 날씨에 감기조심하세요 감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
next.js 13에 dynamic import 적용 시 SEO 영향
안녕하세요, 아래와 같은 방식으로 dynamic import 적용하려는데 SEO에 부정적인 영향이 가는지 궁금해서 질문드립니다.조금 찾아보니 Dynamic Import로 모두 제외해 버렸기 때문에 Google Bot 등의 크롤러가 웹 페이지에 방문했을 때 접속한 document 페이지에 크롤링할만한 정보가 없게 될 것이라는 이야기가 있어서 사실인지 궁금합니다.사실이라면 dynamic import의 해당 단점을 보완할 수 있는 방법으로 ssr:true 설정 이외에 무엇이 있는지 궁금합니다 import dynamic from "next/dynamic"; const Zerocho = dynamic(() => import("features/Zero/components/templates/Zerocho"), { ssr: false }); export default function Hi() { const seo = getPageSeo("hihi"); return ( <> <NextSeo {...seo} /> <SchemaScript schema={schema} /> <Head> <meta name="hello" content={seo.hh} /> </Head> <Title>{seo.title}</Title> <Body> <Zerocho /> </Body> </> ); } export const getServerSideProps = async (context) => { return { props: { mode: true, modeCont: false, ...(await serverSideTranslations(context.gggg, ["hihi", "dodo"])), }, }; };
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[js section07-2-2] 타이머 값 변경에 대해서
if(타이머 === "아직실행안함") 상태에서스크롤퍼센트가 >= 0.7 이면 타이머 값을 다른 값으로 변경해주어야타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드로 스로틀링 되는게 아닌가요?영상에서는 타이머 값을 다른 값으로 변경해주지 않는데 이러면 타이머 = setTimeout(()=>{타이머="아직실행안함"},1000)이 코드를 추가하기 전과 같지 않나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
.eslintrc.json 파일 없음
안녕하세요. 프로젝트 세팅을 진행하고 파일목록을 보는데, .eslintrc.json 파일은 없고 eslint.config.mjs 파일이 있는 것을 확인했습니다. 이대로 진행을 해도 되는 것일까요..?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰 관련 질문
안녕하세요, 비슷한 유형의 질문이 이미 있어 저도 글을 남겨봅니다. 미리 구매해둔 후 이제 듣기 시작하려 하니, 새로운 교육과정으로 리뉴얼 되었다고 하는데, 시기를 놓쳐 쿠폰 혜택을 받지 못했습니다. 해당 강의에 기대를 많이 하고 있었는데, 리뉴얼된 버전으로 듣지 못한다는 사실이 안타까워 혹시 쿠폰을 받을 다른 방법이 없을지 문의드립니다. 감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
hydration 오류 (Fragment key값)
강사님 안녕하세요, 백엔드 서버 연결하고 게시물(PostForm.tsx) 올리는 부분에서 오류가 발생하여 질문드립니다. (섹션5 - 게시글 업로드 완성)hydration 이슈를 찾아봤는데 (https://velog.io/@jhplus13/NextJS-React-Hydration-Error-%ED%95%B4%EA%B2%B0%EA%B8%B0) typeof window과 관련있는거 같은데 혼자 해결하기 어려워 링크 첨부드립니다..!오류해결을 위해 (hydration / PostRecommends.tsx) 해당 부분을 수정하였습니다..!변수입력확인(Date.now(),Math.random(), new Date()) + faker 해당부분은 주석처리 했습니다.태그 중첩 확인, layout.tsx font 연결 확인 [콘솔 에러]intercept-console-error.js:56 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <HotReload assetPrefix=""> <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}> <DevRootNotFoundBoundary> <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}> <NotFoundErrorBoundary pathname="/home" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <Head> <link> <RootLayout> <html lang="ko" className="__variable..."> <body className="__className_fde3a9" - cz-shortcut-listen="true" > ... ...[Fragment key값 오류내용]// package.json { "name": "zcom", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@auth/core": "^0.27.0", "@fortawesome/fontawesome-svg-core": "^6.7.1", "@fortawesome/free-solid-svg-icons": "^6.7.1", "@fortawesome/react-fontawesome": "^0.2.2", "@tanstack/react-query": "^5.62.11", "@vanilla-extract/css": "^1.16.1", "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", "clsx": "^2.1.1", "dayjs": "^1.11.13", "next": "^15.0.4", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", "react-dom": "^19.0.0", "react-intersection-observer": "^9.14.1", "react-textarea-autosize": "^8.5.6", "zustand": "^5.0.2" }, "devDependencies": { "@faker-js/faker": "^9.3.0", "@tanstack/react-query-devtools": "^5.62.11", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.7", "@vanilla-extract/webpack-plugin": "^2.3.15", "msw": "^2.6.8", "typescript": "^5" }, "msw": { "workerDirectory": [ "public" ] } }
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
input type="hidden"으로 설정 시, 오류 미발생
7.2) 리뷰 추가 기능 구현하기 > 15:05~두 방식 모두 동일하게 입력 필드를 숨김 처리하지만1번처럼 input의 type을 hidden으로 설정하게 되면 Next.js에서 오류를 발생시키지 않네요. // 1번 방식 <input type="hidden" name="bookId" value={bookId} /> // 2번 방식 <input hidden name="bookId" value={bookId} />
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 1탄
코드를 아래와 같이 작성하였는데, 이렇게 표시가 됩니다. (사진 참고)레퍼런스도 참고하여 적었는데 해결이 안 되어서 질문 납깁니다. 또한 fontawesome도 강의 내용대로 연동시키려 하였는데 이모티콘이 보이지 않습니다.어떻게 해야 할까요? <!DOCTYPE html> <html lang="ko"> <head> <title>홍길동 님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet" /> <script src="https://kit.fontawesome.com/e3aa47cdec.js" crossorigin="anonymous" ></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <!-- TODAY 0 | TOTAL 12345 --> <div class="today"> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="profile__detail"> <i class="fa-regular fa-face-grin"></i>이름</div> <div class="profile__detail"> <i class="fa-solid fa-phone"></i>Phone</div> <div class="profile__detail"> <i class="fa-regular fa-envelope"></i>E-mail</div> <div class="profile__detail"> <i class="fa-brands fa-instagram"></i>인스타그램</div> </div> <div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 😊</option> <option>슬픔 🥲</option> <option>화남 😑</option> <option>분노 🤬</option> </select> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> ------------- css ------------- * { box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0 0 32px; } .wrapper__left { width: 208px; height: 472px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 3px; margin-right: 7px; } .wrapper__left__header { width: 100%; height: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { padding-top: 10px; font-size: 9px; } .wrapper__left__body { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 20px 30px 0px 30px; border: 1px solid gray; border-radius: 15px; background-color: white; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: gray; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; } .left__body__profile { font-style: normal; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .profile__detail { color: #999999; font-size: 10px; margin-bottom: 10px; display: flex; flex-direction: row; } .fas { color: black; margin-right: 10px; width: 5px; height: 5px; } .left__body__footer { width: 100%; margin-bottom: 30px; } .wrapper__feel { display: flex; flex-direction: column; justify-content: center; width: 100%; } .feel__title { font-size: 11px; margin-bottom: 5px; color: gray; } .wrapper__right { width: 524px; height: 472px; background-color: violet; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 5px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의 쿠폰 질문
개인적인 사정으로 오늘에서야 공지사항을 확인했습니다.기존의 프론트엔드 고농축 코스를 수강중인데 혹시 쿠폰을 다시 발급 받을 수 있을까요? 답변 부탁드립니다.좋은 강의 제공해주셔서 감사합니다. (+쿠폰함을 확인해보았지만 제공받은 쿠폰이 없었습니다. )
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
이 강좌를 수강 하면 게시판을 만들수 있나요?
강좌 목록에는 페이징 게시글 관련사항이 있는데 Db와 연결해서게시판을 만들 수 있나요
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
7.6 createReviewAction 서버 액션 컴포넌트에 state 값을 넘기는 것에 관한 질문입니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 7.6 createReviewAction 서버 액션 컴포넌트에 state 값을 넘기는 것에 관한 질문입니다.강의 8분 35초 쯤에, state를 넘긴다고 하셨는데, 함수 내에서 사용하지 않는데 굳이 왜 넘기는 것인가요? 감사합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
params의 type에서 string[]배열타입이 필요한 이유가 있을까요?
안녕하세요 강사님,혹시 한입 북스 UI 구현하기에서, params의 type을string[] 타입이 필요한 이유가 따로 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
7.3) 리뷰 조회 기능 구현하기 any type관련 질문입니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 7.3) 리뷰 조회 기능 구현하기 any type관련 질문입니다.강의 4분 2초에, any type으로 추론해버리면 추후에 타입 오류가 발생할 가능성이 커진다고 하셨는데 혹시 왜 그런 것인지 구체적으로 알 수 있을까요? 감사합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. 오류 해결
npm run build 했을 때, 북 상세 페이지에서 오류 발생하시는 분들은 아래와 같이 수정해보시길 바랍니다.3.6)네비게이팅 진행 중, npm run build를 통해 빌드 시, 아래와 같이 타입 오류가 발생src/app/book/[id]/page.tsx Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]이유: nextjs 최신 버전에서 params가 promise 형태로 바뀌게 되면서 타입 오류가 발생하는 것으로 추정아래와 같이 타입을 정의import ClientComponent from "@/app/components/ClientComponent"; type PageParams = Promise<{ id: string }>; const Page = async ({ params }: { params: PageParams }) => { const { id } = await params; return ( <div> Page {id} <ClientComponent> <></> </ClientComponent> </div> ); }; export default Page;
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
npm run build 시 에러가 발생합니다.
npm run dev로 실행 시 정상 실행되고있고npm run build 시 아래와 같이 에러가 발생하고있습니다.제 소스코드는 아래에서 확인가능합니다https://github.com/redinbluesky/section02 =========npm run build 시 에러 메시지======== D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02>npm run build> section02@0.1.0 build> next build ▲ Next.js 14.2.18./src/components/book-item.tsx....................................................... ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data Generating static pages (0/7) [ ]인덱스 페이지 Generating static pages (2/7) [= ]Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at Z (D:\01_Study\01_REACT\02_ONE_BITE_NEXT_JS\02_VsCode_WorkSpace\section02\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490) ........................................................Error occurred prerendering page "/lib/fetch-bo.............................Error occurred prerendering page "/lib/fetch-rendom-books". Read more: https://nextjs.org/docs/messages/prerender-error.......................................Error occurred prerendering page "/lib/fetch-one-book". Read more: https://nextjs.org/docs/messages/prerender-error.......................................... ✓ Generating static pages (7/7)> Export encountered errors on following paths: /lib/fetch-books /lib/fetch-one-book /lib/fetch-rendom-books
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버 컴포넌트 실행 시, 브라우저에서도 콘솔을 확인할 수 있도록 변경된 것 같아요!
next.js 15.1.3 (24.12.30) 기준으로 서버 컴포넌트 실행 시, 아래와 같이 브라우저에서도 콘솔을 확인할 수 있도록 변경된 것 같아요!단 서버 측에서만 실행되기 때문에 앞에 Server 라벨이 붙어서 나오는 것 같습니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
next-auth 로그인/회원가입 에러(middleware)
강사님 안녕하세요, 로그인/회원가입 시 middleware export 되지않는 이슈로 질문남깁니다..!터미널에서 middleware가 export가 되지않는다고 뜨는데 import하는 방식이 잘못된건지 여쭙니다.// middleware.ts import { auth as middleware } from "./auth" export const config = { matcher: ['/compose/tweet', '/home', '/explore', '/messages', '/search'], }//auth.ts import NextAuth, {CredentialsSignin} 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.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, }; }, }), ] });// package.json { "name": "x-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@auth/core": "^0.27.0", "@vanilla-extract/css": "^1.16.1", "@vanilla-extract/recipes": "^0.5.5", "@vanilla-extract/sprinkles": "^1.6.3", "classnames": "^2.5.1", "clsx": "^2.1.1", "dayjs": "^1.11.13", "next": "^15.0.4", "next-auth": "^5.0.0-beta.25", "react": "^19.0.0", "react-dom": "^19.0.0", "react-textarea-autosize": "^8.5.6", }, "devDependencies": { "@faker-js/faker": "^9.3.0", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@vanilla-extract/next-plugin": "^2.4.7", "@vanilla-extract/webpack-plugin": "^2.3.15", "msw": "^2.6.8", "typescript": "^5" }, "msw": { "workerDirectory": [ "public" ] } } <터미널 오류내용> ⨯ Error: The Middleware "/src/middleware" must export a `middleware` or a `default` function at <unknown> (webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js:12) at eval (webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js?absolutePagePath=C%3A%5CUsers%5Calsdu%5CDocuments%5CGitHub%5Canimals_forest%5Csrc%5Cmiddleware.ts&page=%2Fsrc%2Fmiddleware&rootDir=C%3A%5CUsers%5Calsdu%5CDocuments%5CGitHub%5Canimals_forest&matchers=&preferredRegion=&middlewareConfig=e30%3D!:12:0) at (middleware)/./node_modules/next/dist/build/webpack/loaders/next-middleware-loader.js?absolutePagePath=C%3A%5CUsers%5Calsdu%5CDocuments%5CGitHub%5Canimals_forest%5Csrc%5Cmiddleware.ts&page=%2Fsrc%2Fmiddleware&rootDir=C%3A%5CUsers%5Calsdu%5CDocuments%5CGitHub%5Canimals_forest&matchers=&preferredRegion=&middlewareConfig=e30%3D! (.next\server\src\middleware.js:642:1) at __webpack_require__ (.next\server\edge-runtime-webpack.js:37:33) at __webpack_exec__ (.next\server\src\middleware.js:681:48) at <unknown> (.next\server\src\middleware.js:682:37) at webpackJsonpCallback (.next\server\edge-runtime-webpack.js:1219:39) at <unknown> (.next\server\src\middleware.js:9:61) at evaluateInContext (node_modules\next\dist\server\web\sandbox\context.js:420:38) GET /home 404 in 4ms Failed to get source map: Error: Failed to read file contents of C:\Users\alsdu\Documents\GitHub\animals_forest\webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js. at getSourceMapFromFile (node_modules\next\src\client\components\react-dev-overlay\internal\helpers\get-source-map-from-file.ts:20:10) at async getSource (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:228:22) at async (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:319:17) at async HotReloaderWebpack.run (node_modules\next\src\server\dev\hot-reloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-server.ts:576:6) at async Server.requestListener (node_modules\next\src\server\lib\start-server.ts:146:6) { [cause]: Error: ENOENT: no such file or directory, open 'C:\Users\alsdu\Documents\GitHub\animals_forest\webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js' at async getSourceMapFromFile (node_modules\next\src\client\components\react-dev-overlay\internal\helpers\get-source-map-from-file.ts:18:19) at async getSource (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:228:22) at async (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:319:17) at async HotReloaderWebpack.run (node_modules\next\src\server\dev\hot-reloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-s at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-server.ts:576:6) at async Server.requestListener (node_modules\next\src\server\lib\start-server.ts:146:6) { [cause]: Error: ENOENT: no such file or directory, open 'C:\Users\alsdu\Documents\GitHub\animals_forest\webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js' at async getSourceMapFromFile (node_modules\next\src\client\components\react-dev-overlay\internal\helpers\get-source-map-from-file.ts:18:19) at async getSource (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:228:22) at async (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:319:17) at async HotReloaderWebpack.run (node_modules\next\src\server\dev\hot-reloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-sserver.ts:146:6) { [cause]: Error: ENOENT: no such file or directory, open 'C:\Users\alsdu\Documents\GitHub\animals_forest\webpack-internal:\(middleware)\node_modules\next\dist\build\webpack\loaders\next-middleware-loader.js' at async getSourceMapFromFile (node_modules\next\src\client\components\react-dev-overlay\internal\helpers\get-source-map-from-file.ts:18:19) at async getSource (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:228:22) at async (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:319:17) at async HotReloaderWebpack.run (node_modules\next\src\server\dev\hot-reloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-soverlay\server\middleware.ts:228:22) at async (node_modules\next\src\client\components\react-dev-overlay\server\middleware.ts:319:17) at async HotReloaderWebpack.run (node_modules\next\src\server\dev\hot-reloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-sreloader-webpack.ts:392:6) at async handleRequest (node_modules\next\src\server\lib\router-server.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-s.ts:319:34) at async requestHandlerImpl (node_modules\next\src\server\lib\router-server.ts:576:6) at async Server.requestListener (node_modules\next\src\server\lib\start-server.ts:146:6) { errno: -4058, code: 'ENOENT', syscall: 'open', path: 'C:\\Users\\alss\\Documents\\GitHub\\x-com\\webpack-internal:\\(middleware)\\node_modules\\next\\dist\\build\\webpack\\loaders\\next-middleware-loader.js' } }
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
netflix clone 할 때 recoil을 하는 순간 에러가 없어지지 않아요
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 깃허브에 올라온 선생님 코드를 모두 복붙해봐도 없어지지 않는데 무엇이 문제일까요? 선생님 코드와 같은데..
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
ThemeProvider에 대해 질문드리겠습니다.
컴포넌트 클라이언트인 ThemeProvider를 최상위 layout의 children을 감싸면 정적인 서버 컴포넌트를 더 이상 활용할 수 없는 제약이 생기지 않나요?? nextjs에서 지향하는 방법인지 잘 모르겠습니다. 이렇게 사용해도 되는것인가요? 아니면 단순 빠른 예제실습을 위해 그렇게 하신건가요?
