Per ardua ad astra.

컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법들어가며Next.js의 @@ 컴포넌트를 클릭하면, 기본적으로 화면의 최상단으로 스크롤이 된다.이러한 현상을 막는 방법을 정리해본다. 방법간단하다. 다음과 같이 @@ 컴포넌트의 @scroll@ 속성의 값을 @false@로 지정해주면 된다.import Link from 'next/link'; Move 참고 사이트 | Next.js" data-og-description="Enable fast client-side navigation with the built-in `next/link` component." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/app/api-refe..

환경 변수 타입 설정하기들어가며타입스크립트에서 환경 변수(Environment Variable)에 타입 오류가 발생하지 않도록 타입을 설정하는 방법을 정리해본다. 방법다음과 같은 환경 변수 파일이 있다고 해보자.이제 이 환경 변수를 프로젝트 내의 다른 파일에서 불러와서 사용해볼 것이다. (Next.js 프레임워크 사용).env.localNEXT_PUBLIC_API_KEY="="***********"NEXT_PUBLIC_SPACE_ID="**************************" (1) @!@(Non-Null Assertion) 연산자 사용하기@!@를 사용하여 값이 @undefined@가 아님을 타입스크립트에 명시한다.하지만 이 방법은 해당 환경 변수가 존재하지 않을 경우, 런타임 에러가 발생한다는..

Hydration 에러 해결하는 방법 (Next.js 15)들어가며Next.js 15에서 생성한 프로젝트에서 아래와 같은 Hydration 에러가 발생할 경우 해결하는 방법을 정리해본다.Console ErrorHydration 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()' ..

렌더링 방식 정리 (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))들어가며Next.js의 렌더링 방식인 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)에 대해 정리해본다.Next.js에서 페이지를 작성하면 기본적으로 CSR 방식으로 렌더링된다. CSR(Client Side Rendering)개념브라우저에서 자바스크립트 파일을 다운로드한 후, 클라이언트 측에서 렌더링을 ..

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

갑자기 "'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다." 오류가 발생할 때 해결 방법들어가며Next.js 프로젝트 서버를 실행할 때, 갑자기 아래와 같은 오류가 발생하는 경우가 있다.$ yarn devyarn run v1.22.22$ next dev'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이때, 이 문제를 해결하는 방법을 정리해본다. 방법해결 방법은 간단하다. 캐시를 지워준 후, 프로젝..

환경 변수 사용 방법들어가며Next.js에서 환경 변수(Environment Variable)를 사용하는 방법을 정리해본다. 방법① 환경 변수 파일 설정하기Next.js는 @.env@ 파일을 통해 환경 변수를 불러올 수 있다.프로젝트 최상위 경로(@/@)에 다음과 같은 @.env@ 파일을 생성한다. /.env.localNEXT_PUBLIC_API_URL=https://api.example.comAPI_SECRET_KEY=your-secret-key ⇒ 다음과 같이 @.env@뒤에 용도에 따라 다양한 접미어를 붙일 수 있다. 환경변수 파일명설명@.env.local@로컬 개발 환경에서 사용하는 환경 변수 (Git에 추가하지 않는 것이 좋다.)@.env.development@개발 환경에서 사용하는 환경 변수@..

Clerk들어가며Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Clerk 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Clerk개념Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 구현할 수 있도록 돕는 서비스소셜 로그인, 멀티팩터 인증(MFA), 세션 관리 등을 기본 제공한다.Next.js의 서버리스 환경과도 잘 맞기 때문에 API 라우트와 미들웨어에서 유용하게 사용된다.Clerk을 이용하면 쉽게 소셜 로그인(Google, Facebook, GitHub 등) 기능을 구현할 수 있다.  회원가입 및 프로젝트 생성 Cler..

폴더 구조 및 동적 경로 설정하기들어가며Next.js를 이용하여 폴더 구조 및 동적 경로를 설정하는 방법을 정리해본다. 방법① 비공개 폴더(Private Folder) 생성하기앱(@app@) 폴더는 기본적으로 URL 세그먼트가 된다.비공개 폴더(Private Folder)를 만들고 싶을 경우, 폴더 이름 앞에 밑줄(@_@)을 추가한다._css ⇒ @_css@ 폴더 생성 시, 해당 폴더는 URL 세그먼트로 노출되지 않으며, 만약 해당 경로에 접속할 경우 404 페이지를 반환한다. 비공개 폴더는 라우팅에 직접 포함되지 않는 폴더이다.일반적으로 내부 관리 목적으로 사용된다.  ② 라우트 그룹(Route Group) 생성하기라우트 그룹(Route Group)은 특정 페이지나 경로를 그룹화한다.이러한 그룹의 이름..

정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)들어가며사전 렌더링 방법인 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)에 대해 정리해본다. 정적 생성(Static Generation)개념웹 페이지를 미리 생성하여 HTML 파일로 저장하는 방식웹 사이트의 빌드 단계에서 모든 페이지가 사전에 렌더링되며, 사용자가 페이지를 요청할 때 서버에서 미리 생성된 HTML 파일을 즉시 제공하는 방식빠른 로딩 속도와 서버 부하 감소를 위해 사용SSG(Static Site Generation)이라고도 한다. 장점페이지가 미리 생성되어 있으므로, 사용자는 빠르게 페이지를 볼 수 있다. (빠른 페이지 로딩)요청..