느려도 한걸음씩

이번 포스트에서는 Next.js에서 비동기 작업을 통해 데이터를 가져오는 방법에 대해 알아보겠습니다. ✅ 기본 구조import Link from "next/link";import classes from "./page.module.css";import MealsGrid from "@/components/images/meals/meals-grid";export default function MealsPage() { return ( Delicious meals, created by you Choose your favorite recipe and cook it your self. It is easy and..

이번 포스트에서는 Next.js의 중요한 개념인 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)의 차이를 실제 예제와 함께 살펴보겠습니다. 🧩 문제가 발생한 컴포넌트먼저 다음과 같은 슬라이드 쇼 컴포넌트를 만들었다고 가정해봅시다import { useEffect, useState } from "react";import Image from "next/image";import burgerImg from "@/assets/burger.jpg";import classes from "./image-slideshow.module.css";// 이미지 배열 생략export default function ImageSlideshow() { const [current..

안녕하세요! 이번 포스트에서는 Next.js에서 동적 라우팅(Dynamic Routing)을 설정하는 방법에 대해 알아보겠습니다.URL에 따라 동적으로 페이지를 보여주는 기능은 블로그, 상품 상세페이지, 유저 프로필 등 다양한 곳에서 자주 사용됩니다. 🗂 기본 Blog 페이지 만들기먼저 app/ 폴더 안에 blog/ 폴더를 만들고, 그 안에 page.js 파일을 생성해 아래와 같이 작성합니다:import Link from "next/link";export default function BlogPage() { return ( The Blog Post 1 Post 2 );} 이 페이지는 /blog 경로에서 렌더..

안녕하세요. 이번 포스트에서는 Next.js에서 커스텀 컴포넌트를 생성하고 사용하는 방법을 알아보겠습니다.React를 사용해보셨다면 매우 익숙한 내용일 거예요. 🎯 커스텀 컴포넌트란?기존 React 프로젝트와 마찬가지로, Next.js에서도 UI를 구성하는 요소들을 별도의 컴포넌트 파일로 나누어 재사용할 수 있습니다. 예를 들어, 다음과 같은 Home 페이지가 있다고 가정해보겠습니다.import Link from "next/link";// app/page.jsexport default function Home() { return ( Welcome to this NextJS Course! 🔥 Let's get started! 🔥 A..

이번 포스트에서는 Next.js에서 페이지 간 이동하는 방법과 layout.js 파일의 역할에 대해 알아보겠습니다. 🚀 페이지 이동: Link 컴포넌트 사용하기Next.js에서 다른 페이지로 이동할 때는 next/link 패키지에서 제공하는 Link 컴포넌트를 사용해야 합니다.import Link from "next/link";export default function Home() { return ( Welcome to this NextJS Course! 🔥 Let's get started! 🔥 About us );} 위 코드처럼 Link 컴포넌트의 href 속성에 이동하고자 하는 경로(/about)를 작성하..

이번 포스트에서는 Next.js를 설치하고, app 폴더를 활용한 페이지 라우팅 방법에 대해 알아보겠습니다. ✅ Next.js 설치하기먼저, 아래 명령어를 입력해 Next.js 프로젝트를 생성합니다.npx create-next-app@latest명령어를 실행하면 프로젝트 이름과 TypeScript 사용 여부, ESLint 설정 등을 물어보는 몇 가지 질문이 나오며, 이에 따라 프로젝트가 생성됩니다.(설정에서 app라우터를 사용한다고 체크해야합니다) Next.js 공식 사이트: https://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextj..

Next.js는 React 기반의 프레임워크로, React의 장점은 그대로 살리면서도서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, API 라우트, 이미지 최적화 등 다양한 기능을 기본적으로 제공합니다. 특히 SEO(검색 엔진 최적화)가 중요한 프로젝트에서는 클라이언트 사이드 렌더링(CSR)만 제공하는 React보다 Next.js가 더 적합할 수 있습니다. 또한 파일 기반의 라우팅 시스템 덕분에 복잡한 설정 없이도 손쉽게 페이지를 만들 수 있는 장점이 있습니다. Next.js는 개인 블로그부터 대규모 서비스까지 폭넓게 활용되고 있으며, Vercel이라는 회사에서 주도적으로 개발하고 있습니다. Vercel과의 연동을 통해 배포 또한 매우 간편하다는 장점이 있습니다. 다음 글부터는 Nex..