173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next.js 시작하기
섹션 11의 이미지 성능 최적화 강의에서 Next.js의 이미지 성능 최적화에 대해 설명하실 때의 강의 코드가 <Image /> 컴포넌트가 아닌 <img /> 요소인데도 이미지 성능 최적화가 잘 되는 것을 보았습니다. 그럼 굳이 <img /> 요소 대신 <Imgae /> 컴포넌트를 사용해야 하는 이유가 있나요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
무한 스크롤 구현 중에, 스크롤을 내리면 자연스럽게 다음 페이지로 이어지는 게 아니라, 한번 아래로 내려갔다가 다시 스크롤했던 위치로 돌아옵니다. 이 문제는 어떻게 해결할 수 있을까요?
미해결
Next.js 시작하기
안녕하세요 :) 섹션 9 부분을 다 듣고 나서 명확히 이해가 가지 않는 부분이 있어 질문드립니다. getServerSideProps를 이용하여 페이지를 로딩할 때 는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 프론트 서버(Next.js 서버) 이고, useEffect를 이용하여 페이지를 로딩할 때 는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 클라이언트(브라우저) 라고 이해하는게 맞을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
강사님 안녕하세요. 학습을 거의 끝낸 상태라 거의 마지막 질문이 될 것 같기도 한데요^^ 클라이언트 컴포넌트는 서버 컴포넌트를 Import 할 수 없기 떄문에 Next 는 서버 컴포넌트를 클라이언트 컴포넌트로 동작시킨다고 배웠습니다. 그런데 만약 이러한 서버 컴포넌트에 async 방식의 api 코드가 포함되어 있는 경우에는 이런 코드가 클라이언트 방식으로 동작하면 문제가 발생할 것 같은데요. 결국, 이런 상황에서는 서버 컴포넌트를 그대로 두어서는 안되고 강의에서 설명하신 합성 방식으로 변경을 하거나 아니면 해당 서버 컴포넌트의 API 로직을 react-query 나 useEffect 훅을 이용해서 실행될 수 있는 클라이언트 컴포넌트로 리팩토링을 해야만 되는거 같은데 제가 올바로 이해한 게 맞을까요?
미해결
한 입 크기로 잘라먹는 Next.js
/app/(with-searchbar)/page.tsx /app/layout.tsx 터미널 첨부한 사진과 같이 수업내용에 따라 코드를 작성하였고, 선생님의 화면과는 다르게 저렇게 같은 GET 호출이 두번이 나오네요... 옵션을 따로 추가하는것으로 바뀌었을까요?? npm run dev를 껐다가 다시 실행해도 마찬가지의 결과가 나옵니다!
미해결
Next + React Query로 SNS 서비스 만들기
const onClickHot = () => { setCurrent('hot'); router.replace(`/search?q=${searchParams.get('q')}`) } 이 코드가 있으면 q=null일때 주소가 http://localhost:3000/search?q=null 이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠? null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 책 데이터를 불러오지 못해서 문의 드립니다. 스웨거에서도 아무 데이터를 못 불러오는데 혹시 어떤 문제일까요? npx prisma db push 도 잘 완료 하였고 백엔드 서버도 start 해 놓은 상태입니다.
해결됨
한 입 크기로 잘라먹는 Next.js
강사님, 안녕하세요. 강의를 들으면서 살짝 혼란스러운 부분이 있습니다. 사실 Next.js 도 바탕은 React 인데요. React 에서 제일 많이 언급되고 중요시되는 부분은 상태(state)관리라고 생각이 되는데 Next.js 로 SSR 위주의 페이지를 작성하게 되면 결국 상태관리는 최소화하게 되는 것인데 이게 React 의 컨셉과 맞는 것인지 살짝 이해가 되지 않습니다. (강의에서도 state 는 거의 언급이 되지 않고요) 그렇다고 상태관리를 최대한 활용하는 CSR 위주의 개발을 하게 되면 Next.js 의 장점을 거의 얻지 못하게 될 것 같기도 하고요. 저는 Next.js 가 제공하는 프레임워크 측면의 혜택을 얻고자 Next.js 로 어플리케이션 구축을 해보고 싶은데 해당 어플리케이션이 CSR 의 비중이 적지 않을 것 같아서 좀 망설여지는 부분이 있습니다. 현대 애플리케이션들은 사용자들과의 상호작용이 적을 수가 없을텐데 대다수의 앱들이 Next.js 의 SSR 위주의 개발로 충분히 커버가 가능한 것일까요?
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
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/data yml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다!
미해결
Next + React Query로 SNS 서비스 만들기
Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 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}) } }
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요, 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 서버에 걸리는 부하를 어떻게 해소할 수 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. [id].tsx 소스인데요 .. fetch를 2씩 호출되는 걸까요? ㅠ 2번째 호출될때는 id 값에 undefinded 로 되어서 페이지 오류가 발생됩니다 ㅠㅠ 뭐가 잘못 된것일까요? 캡쳐 보내드립니다.
미해결
손에 익는 Next.js - 공식 문서 훑어보기
// [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에서는 같은 요청이 중복되지 않도록 요청을 캐시하고 중복 요청을 제거 한다고 배웠는데 이렇게 중복으로 요청하는 이유는 뭘까요?
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npx prisma db push 명령어를 입력했을 때 위와 같은 에러가 나고있습니다. 같은 에러 발생하신경우 있나요?
해결됨
한 입 크기로 잘라먹는 Next.js
15버전이 아닌 14.2버전으로 create-next-app을 진행했는데 public 폴더가 자동으로 생기지않습니다. 15버전은 자동으로 생성이 되는데 14.2버전에는 생성되지 않는 이유가 있나요??
미해결
Next + React Query로 SNS 서비스 만들기
제로초님 하신대로 그대로 프로젝트를 생성하고 실행했더니 화면은 그대로 뜨는데 에러가 1개 있어서 봤더니 hydration 에러라고 뜨네요 ㅠㅠ 지금 z-com 프로젝트를 수업용 / 연습용으로 총 2개 진행중인데 수업용 프로젝트는 이런 에러가 없었는데 연습용에서 에러가 발생하네요. 아래는 에러 코드입니다 ! Console Error Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. 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
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
'use client'; import React, { useEffect, useState } from 'react'; import { Auth } from '@supabase/auth-ui-react'; import { ThemeSupa } from '@supabase/auth-ui-shared'; import { createSupabaseBrowserClient } from '@/lib/client/supabase'; import useHydrate from '@/app/hooks/useHydrate'; const AuthUI = () => { const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const [user, setUser] = useState(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); if (result?.data?.user) setUser(result?.data?.user); }; const handleLogout = async () => { supabase.auth.signOut(); window.location.reload(); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div>{user ? `로그인 됨${user?.email}` : '로그아웃'}</div> <> {user && ( <button onClick={handleLogout} className="border-2 border-black"> 로그아웃 </button> )} </> <div className="mx-auto max-w-[500px]"> <Auth redirectTo={process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO} supabaseClient={supabase} appearance={{ theme: ThemeSupa }} onlyThirdPartyProviders providers={['google']} /> </div> </section> ); }; export default AuthUI; {"code":400,"error_code":"validation_failed","msg":"Unsupported provider: provider is not enabled"} 구글 로그인 시 해당 에러가 발생합니다 설정 같은 부분은 강의에 맞게 설정하였습니다
해결됨
한 입 크기로 잘라먹는 Next.js
강의 중간에 요런식으로 설명나오는거 어떤 익스텐션 깔아야하나요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요!! 페이지 별 적용을 원하는 레이아웃이 있는 경우 getLayout 함수를 컴포넌트의 메서드로 추가하여 적용하는 강의를 들었습니다. 그런 식으로 레이아웃을 설정하는 방법은 처음 봐서 매우 새롭고 신기하고 즐거운 강좌였습니다. 감사합니다! 궁금한 점이 있는데요, 그렇게 했을 때 페이지별로 최상단에 SearchableLayout 컴포넌트를 적용하는 것과 무슨 차이가 있는지 궁금했습니다. (혹은 강의에서 그렇게 설명해주신 이유가 궁금합니다!)
