Next.js에서 Image 사용방식대로 사용을 했는데,계속 경고가 발생한다. Next에서 Image 태그는 이렇게 alt와 width, height를 필수로 명시해줘야한다.근데 계속 콘솔에서 width: "auto", height: "auto"를 설정하라고 뭐라한다.그래서이런식으로도 해봤는데 오류가 발생한다.어떻게 해결하냐? width와 height를 둘다 style에서 props로 넘겨주면 된다.이렇게 작성하면 경고없이 깨끗하게 사용할 수 있다.

먼저 에러가 발생한 문제는 다음과 같습니다. App Router 기반에서 MUI 사용 시 발생하는 Hydration failed 에러발생 시점: AppBar, Typography, Button 등 MUI 컴포넌트 사용 시에러 메시지: "Hydration failed because the server rendered HTML didn't match the client..."  왜 문제가 발생했냐면, Next.js App Router는 SSR을 기본으로 하기 때문에 서버/클라이언트 렌더가 다르면 mismatch 발생했습니다.MUI는 @emotion/react를 사용해 동적 스타일 삽입하고있습니다.서버에서 렌더된 CSS와 클라이언트에서 렌더된 CSS가 일치하지 않으므로 → 오류가 발생한 상황입니다. MUI 공..

안녕하세요! 오늘은 Next.js 프로젝트에서 JWT 토큰을 이용해서 API를 호출하는 방법에 대해 이야기해보려고 합니다.저도 처음 해보는 거라 엄청 떨리고, 뭐가 잘 안 되면 어쩌나 걱정도 많았는데요,어찌저찌 하다 보니까 결국 성공해서 기분이 너무 좋더라고요!그래서 저처럼 처음 도전하는 분들을 위해 정리 겸 공유하려고 합니다.토큰 기반 API 호출이 뭔가요?프로젝트를 만들다 보면, 서버와 데이터를 주고받을 때 "너 누구냐?"를 꼭 물어봐야 할 때가 있어요.그럴 때 쓰는 게 바로 JWT (JSON Web Token)인데, 이걸 Authorization 헤더에 붙여서 보내면,서버는 "오, 네가 맞네~" 하고 요청을 받아주는 거죠.헤더에 붙이는 방법Authorization: Bearer 근데 이걸 매번 넣어..

Next.js에서 뷰포트(viewport)를 설정하려다가 "Unsupported metadata viewport" 오류를 만난다면?최근 Next.js 업데이트로 인해 기존의 metadata.viewport 방식이 더 이상 지원되지 않기 때문!지금부터 오류 원인과 해결 방법을 정리해보겠습니다. 😊export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", viewport: "width=360, height=800, initial-scale=1, user-scalable=no",};Next.js layout.tsx에서 위처럼 metadata.viewport을 설..

Next.js는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.1. App Router와 Page Router란?App Router (Next.js 13 이상)기반 디렉토리: app/React의 서버 컴포넌트(Server Components)를 기본으로 사용.더 나은 레이아웃 재사용과 중첩 라우팅을 제공.서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 ..

Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.오늘은 "use client"!!!!"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!1. Next.js: 서버에서? 브라우저에서?Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?여기서 바로 CSR(클라이언트 사이드 렌더링)이 ..

평소와 같이 next를 설치중에 갑자기 못보던 문구가 생겼다.Would you like to use Turbopack for next dev? ??? 뭐지,, 분명 이런 조건설정은 없었는데. 이 글에 들어온 당신도 나와 비슷한 의문이 들었을거라 생각하여 글을 작성한다.만약 설치 과정에서 "Would you like to use TurboPack for next dev?"라는 질문을 받았다면, 이는 기존의 Webpack을 대체할 차세대 개발 서버로 TurboPack을 사용할 수 있음을 의미한다. (Next.JS는 기본으로 Webpack을 사용함.) 지금부터 TurboPack이 무엇인지, 어떤 장점이 있는지, 그리고 왜 Next.js에서 추천되는지 설명하겠다.🌪️ TurboPack이란?TurboPack은 V..

중간고사가 끝났는데, 10월도 끝나가네요. 2024년도 끝나가고요, 25년까지 100일도 안남았다는데,,사담은 각설하고 GitHub Profile Viewer 프로젝트 회고 정리합니다.https://www.notion.so/GitHub-Profile-Viewer-12aeaede9dc58013a601c71d15bfae5d?pvs=4시험이 끝나고 약 3일간의 일정을 잡고 개발을 진행했습니다.💡 GitHub Profile Viewer, 어떤 프로젝트인가요?kimjusnu/github_profile_viewer: GitHub_Profile_Viewer GitHub - kimjusnu/github_profile_viewer: GitHub_Profile_ViewerGitHub_Profile_Viewer. Cont..