Next.js는 파일 기반 라우팅(file-based routing) 시스템을 채택하고 있습니다. 이는 기존의 React Router처럼 별도 설정 없이, 폴더 구조만으로 자동으로 라우팅이 구성되는 방식입니다.

1. 기본 라우팅

src/app/page.jsx → /
src/app/about/page.jsx → /about
src/app/login/page.jsx → /login

각 디렉토리 안에 있는 page.jsx 파일이 해당 URL 경로와 매핑됩니다.

2. 동적 라우팅

Next.js에서는 대괄호([param]) 문법으로 동적 라우팅이 가능합니다.

src/app/posts/[id]/page.jsx → /posts/1, /posts/abc 등 다양한 id 값 허용

3. 중첩 라우트

디렉토리를 중첩시켜 라우트를 구성할 수 있습니다. 각 디렉토리에서 layout.jsx를 정의하면 해당 경로 이하의 모든 하위 페이지에 공통 레이아웃을 적용할 수 있습니다.

4. API 라우트

src/app/api/hello/route.js → /api/hello

Next.js는 API 라우팅을 위한 구조도 제공합니다. 간단한 백엔드 기능을 이 구조로 함께 개발할 수 있습니다.

5. 기타 관련 파일들

  • layout.jsx: 공통 레이아웃 정의
  • loading.jsx: 로딩 중 화면 정의
  • error.jsx: 에러 발생 시 렌더링할 컴포넌트
  • head.jsx: <head> 메타 태그 커스터마이징

결론

Next.js의 라우팅은 매우 직관적이며 유지보수에 강합니다. 코드를 분리하고 관리하기 좋으며, 디렉토리 구조만으로도 복잡한 웹페이지의 구성과 흐름을 명확하게 표현할 수 있습니다. 이는 규모가 커질수록 더욱 진가를 발휘합니다.

 

'Front-End' 카테고리의 다른 글

왜 Next.js인가? React, Rust, 기타 프레임워크 중 Next.js를 선택한 이유  (0) 2025.05.07
백엔드 개발자를 위한 UI 컴포넌트 솔루션, shadcn/ui  (0) 2025.05.06
JSP와 SPA의 페이지 이동  (1) 2025.05.06
TypeScript, 써야 할까? 장단점과 도입 고려 사항 정리  (2) 2025.05.03
SSR (서버 사이드 렌더링) vs SPA (싱글 페이지 애플리케이션)  (0) 2025.02.16

웹 프론트엔드 개발을 시작할 때 수많은 프레임워크와 라이브러리 중 어떤 것을 선택할지 고민하게 됩니다. React, Vue, Angular, Svelte 등 다양한 선택지가 있지만, 최근에는 Next.js가 압도적으로 주목받고 있습니다. 왜 그런지, 그리고 왜 나 역시 Next.js를 선택했는지를 공유하고자 합니다.

✅ React 위에서 동작하는 프레임워크

Next.js는 React를 기반으로 만들어졌기 때문에 기존에 React를 알고 있다면 진입 장벽이 낮습니다. 순수 React만으로 프로젝트를 구성하면 라우팅, SSR(서버사이드 렌더링), SEO 최적화 등을 직접 처리해야 합니다. 반면, Next.js는 이런 부분을 프레임워크 수준에서 기본 제공합니다.

✅ 서버 사이드 렌더링(SSR) & 정적 생성(SSG) 지원

SEO에 민감한 웹페이지(예: 블로그, 쇼핑몰 등)에서는 SSR이 매우 중요합니다. Next.js는 getServerSideProps, getStaticProps 등을 통해 페이지를 서버에서 렌더링하거나 빌드시 미리 생성할 수 있게 해줍니다. 이는 React가 SPA(Single Page Application)로서 갖는 SEO 한계를 극복합니다.

✅ 파일 기반 라우팅 + API 라우트

Next.js는 디렉토리 구조만으로 라우팅을 구성할 수 있어 직관적이며 유지보수가 쉽습니다. 또, /api 디렉토리를 통해 API 라우트를 구성할 수 있어 간단한 백엔드 기능까지 포함한 풀스택 개발이 가능합니다.

✅ Fullstack에 가까운 생산성

Next.js는 Vercel이라는 호스팅 플랫폼과도 잘 통합되어 있으며, 프론트엔드와 백엔드를 함께 관리할 수 있는 Fullstack 개발 환경을 지향합니다. Rust, Go, Express 등의 백엔드 언어나 프레임워크도 뛰어나지만, Next.js는 프론트 중심의 프로젝트를 빠르게 진행할 수 있게 해줍니다.

✅ TypeScript, ESLint, Tailwind 등과의 높은 호환성

Next.js는 초기 설정만으로도 TypeScript, ESLint, Prettier, Tailwind CSS 등의 툴을 자동으로 통합할 수 있어, 현대적 개발 환경을 구축하는 데 매우 유리합니다.

결론

React를 잘 알고 있다면, 그리고 빠르게 프론트엔드와 SSR을 적용한 웹페이지를 만들고 싶다면 Next.js는 매우 매력적인 선택지입니다. Rust나 다른 백엔드 프레임워크가 뛰어난 퍼포먼스를 제공할 수는 있지만, 웹의 빠른 개발과 배포, 사용자 경험을 생각하면 Next.js가 가진 강점은 분명합니다.

'Front-End' 카테고리의 다른 글

Next.js의 라우팅 개념 정리  (0) 2025.05.07
백엔드 개발자를 위한 UI 컴포넌트 솔루션, shadcn/ui  (0) 2025.05.06
JSP와 SPA의 페이지 이동  (1) 2025.05.06
TypeScript, 써야 할까? 장단점과 도입 고려 사항 정리  (2) 2025.05.03
SSR (서버 사이드 렌더링) vs SPA (싱글 페이지 애플리케이션)  (0) 2025.02.16

Next.js 프로젝트에서 다음과 같은 오류를 만나는 경우가 있습니다:

Module not found: Can't resolve 'lucide-react'

이 오류는 외부 패키지인 lucide-react가 프로젝트에 설치되지 않았을 때 발생합니다. 이 글에서는 오류의 원인과 해결 방법을 간단하게 정리해보겠습니다.

1. 오류 원인

lucide-react는 아이콘 컴포넌트를 제공하는 라이브러리로, 보통 shadcn/ui 기반의 UI 컴포넌트를 생성할 때 함께 사용됩니다. 예를 들어 select, button, input 등 컴포넌트 내에서 다음과 같이 아이콘을 import할 수 있습니다:

import { CheckIcon, ChevronDownIcon } from "lucide-react";

하지만 lucide-react 패키지가 설치되어 있지 않으면, Next.js는 해당 모듈을 찾을 수 없다는 에러를 출력하게 됩니다.

2. lucide-react란?

lucide-react는 Feather Icons를 기반으로 만든 React용 오픈소스 아이콘 라이브러리입니다. SVG 아이콘을 컴포넌트 형태로 제공하며, 다음과 같은 특징을 가집니다:

  • React 컴포넌트로 손쉽게 아이콘 사용 가능
  • Feather 스타일의 미니멀하고 직관적인 디자인
  • shadcn/ui에서 기본 아이콘 세트로 자주 사용됨
  • 필요에 따라 개별 아이콘만 import하여 번들 크기 최적화 가능

사용 예시:

import { CheckIcon, TrashIcon } from 'lucide-react';

function Example() {
  return <CheckIcon size={24} className="text-green-500" />;
}

공식 GitHub: https://github.com/lucide-icons/lucide

3. 해결 방법

아래 명령어를 실행하여 lucide-react 패키지를 설치하면 문제가 해결됩니다.

npm install lucide-react

또는 yarn을 사용하는 경우:

yarn add lucide-react

설치가 완료되면 개발 서버를 재시작하세요:

npm run dev

4. 추가 팁: Shadcn UI 사용자라면

shadcn/ui를 이용해 컴포넌트를 생성한 경우, 필요한 의존성(lucide-react, tailwind-variants 등)이 자동으로 설치되지 않는 경우도 있습니다. 따라서 컴포넌트 생성 후 README.md 또는 CLI 안내에 따라 필요한 의존성은 수동으로 설치해야 합니다.

'Front-End > Next.js' 카테고리의 다른 글

[RTK]자주 쓰는 Redux Toolkit 기능  (0) 2025.05.10
RTK(Redux Toolkit) : 비동기 상태관리부터 Axios와의 차이, 예제  (0) 2025.05.10
useState 오류 해결: Next.js 13~15에서 'use client'가 필요한 이유  (0) 2025.05.07
Next.js 프로젝트에서 '@/components/ui/tabs' 모듈을 찾을 수 없는 오류 해결 방법  (0) 2025.05.07

+ Recent posts

티스토리툴바