Next.js Metadata란?Next.js 13버전부터 도입된 App Router에서는 metadata API를 통해 웹 페이지의 메타데이터를 쉽게 관리할 수 있게 되었다.메타데이터란 HTML 문서의 태그 내에 존재하는 정보들로, 웹 페이지의 제목, 설명, 키워드, Open Graph 태그 등을 포함.이러한 메타데이터는 검색 엔진 최적화(SEO)에 중요한 역할을 하며, 소셜 미디어에서 공유될 때 웹 페이지가 어떻게 표시될지 결정한다. Next.js의 metadata API는 개발자가 각 페이지 또는 레이아웃 컴포넌트에서 메타데이터를 직접 정의할 수 있게 해주어, 페이지별로 맞춤화된 메타데이터 설정이 가능하다.특히 TypeScript와 함께 사용하면 타입 안정성을 보장받으면서 메타데이터를 관리할 수 ..

App Router가 도입되면서 Next.js 커뮤니티에서는 src 디렉토리 사용에 관한 논의가 활발해졌다.학부생으로서 이러한 프로젝트 구조의 개념과 장단점을 이해하는 것은 웹 개발 역량을 한 단계 높이는 데 중요하다고 생각했다.이에 App Router 환경에서 src 디렉토리를 사용할지 말지에 대한 분석을 해봤다.src 디렉토리 사용의 장점src 디렉토리를 사용하면 여러 가지 이점이 있다.우선 애플리케이션 코드와 설정 파일을 명확하게 분리할 수 있다 => 이는 프로젝트가 커질수록 더 중요해진다.루트 디렉토리에는 package.json, next.config.js, .eslintrc.js, tsconfig.json 등의 설정 파일만 두고, 실제 개발 코드는 모두 src 안에 넣어 관리할 수 있다.App ..

Next.js에서의 페이지 이동 방법 개요Next.js에서 페이지 간 이동을 구현하는 방법은 크게 두 가지가 있다.Link 컴포넌트 사용하기useRouter 훅을 사용하여 프로그래매틱하게 라우팅하는 방법일반 React에서 사용하는 useNavigate나 React Router의 Link와 비슷한 역할을 한다고 생각하면 이해하기 쉽다. 두 방법 모두 클라이언트 사이드 라우팅을 지원하여 전체 페이지를 다시 로드하지 않고 페이지 간 빠른 전환이 가능하다.이는 사용자 경험을 향상시키고 애플리케이션의 반응성을 높여준다.Link 컴포넌트를 사용한 클라이언트 사이드 라우팅Link 컴포넌트는 Next.js에서 가장 기본적인 페이지 이동 방법이다.이 컴포넌트는 HTML의 태그를 확장한 것으로, 클릭 시 JavaScri..

Next.js는 리액트 기반의 프레임워크로서 서버 사이드 렌더링(SSR)을 기본적으로 지원한다.프론트엔드 개발자로서 스타일링 방식을 선택할 때 많은 옵션이 있지만, 그중에서도 스타일드 컴포넌트(styled-components)는 리액트 생태계에서 인기 있는 CSS-in-JS 라이브러리이다.하지만 Next.js의 SSR 환경에서 스타일드 컴포넌트를 사용할 때 예상치 못한 문제가 발생할 수 있다. 특히 TypeScript를 함께 사용하는 환경에서는 추가적인 타입 관련 설정도 고려해야 한다이 글에서는 이러한 문제가 왜 발생하는지, 그리고 어떤 영향을 미치는지 직접 실험을 통해 정리해보고자 한다!!!(styled-components에 대한 기본적인 이해가 있다고 가정하며 진행하겠다.)Next.js에서의 SSR ..

Next.js 라우팅의 기본 개념Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅(File-system based routing)이다.이 방식은 React의 SPA(Single Page Application)에서 흔히 사용되는 React Router와 같은 별도의 라우팅 라이브러리가 필요 없다는 큰 장점이 있다.Next.js는 프로젝트의 디렉토리 구조와 파일명을 기반으로 자동으로 라우팅을 구성한다. 파일 시스템 기반 라우팅이란 간단히 말해 폴더와 파일의 구조가 곧 웹 애플리케이션의 URL 경로(path)가 되는 방식이다.예를 들어, /pages/about.tsx 파일은 example.com/about URL로 접근할 수 있다.이렇게 직관적인 구조는 프로젝트의 구조를 이해하기 쉽게 만들고,..