반응형 프론트엔드/넥스트9 [NextJs] Next.js A to Z: Spring 개발자를 위한 완벽 가이드 Next.js A to Z: Spring 개발자를 위한 완벽 가이드안녕하세요! Spring으로 백엔드 개발에 입문하신 것을 축하드립니다. 이제 현대적인 프론트엔드 기술 스택의 핵심인 Next.js를 배우실 차례입니다. 이 가이드는 Spring 개발자의 관점에서 Next.js의 모든 것을 이해하기 쉽게 설명합니다.목차Intro: Next.js, 왜 필요한가?React, 그리고 Next.js의 역할Spring Boot + Thymeleaf vs Next.js: 무엇이 다른가?Next.js의 핵심 철학: 렌더링의 모든 것Chapter 1: 개발 환경 설정 및 첫 프로젝트필수 도구 설치 (Node.js, VS Code)create-next-app으로 프로젝트 시작하기프로젝트 구조 훑어보기 (Spring Boot.. 2025. 9. 17. [NextJs] Chapter 8: 배포와 그 너머 Chapter 8: 배포와 그 너머열심히 만든 애플리케이션을 세상에 공개할 시간입니다. Next.js는 개발사인 Vercel을 통해 매우 쉽고 빠른 배포를 지원합니다. 또한, 코드에 하드코딩하면 안 되는 민감한 정보를 관리하는 방법도 알아봅니다.1. Vercel을 이용한 원클릭 배포Vercel은 Git 리포지토리를 연결하여, main 브랜치에 코드를 push 할 때마다 자동으로 빌드 및 배포를 수행해주는 플랫폼입니다.배포 과정:GitHub에 프로젝트 Push: 지금까지 만든 Next.js 프로젝트를 GitHub 리포지토리에 push합니다.Vercel 가입 및 연동: Vercel에 GitHub 계정으로 가입하고 로그인합니다.프로젝트 Import: Vercel 대시보드에서 'Add New... -> Proj.. 2025. 9. 17. [NextJs] Chapter 7: 실전 예제 - 나만의 블로그 만들기 Chapter 7: 실전 예제 - 나만의 블로그 만들기지금까지 배운 개념(SSG, 동적 라우팅, 컴포넌트 등)을 총동원하여 간단한 마크다운 기반 블로그를 만들어 봅시다. 이 예제는 Next.js의 핵심 기능을 실제로 어떻게 활용하는지 보여주는 좋은 사례입니다.요구사항posts 폴더에 있는 마크다운(*.md) 파일들을 읽어와 블로그 게시물로 사용한다.메인 페이지(/)에는 모든 포스트의 제목과 날짜 목록이 보인다. (SSG)목록의 제목을 클릭하면 해당 포스트의 상세 페이지(/blog/[slug])로 이동한다. (동적 라우팅)상세 페이지에서는 마크다운으로 작성된 본문 내용이 HTML로 렌더링되어 보인다. (SSG)Step 1: 프로젝트 설정 및 포스트 데이터 준비npx create-next-app my-blo.. 2025. 9. 17. [NextJs] Chapter 6: 스타일링과 UI Chapter 6: 스타일링과 UI애플리케이션의 기능만큼이나 중요한 것이 바로 디자인입니다. Next.js는 다양한 CSS 스타일링 방식을 지원합니다. 여기서는 가장 대표적인 두 가지 방식과, 현대 웹 개발의 대세인 Tailwind CSS에 대해 알아봅니다.1. 전역(Global) CSS애플리케이션 전체에 적용되는 CSS입니다. src/pages/_app.js 파일에서만 import 할 수 있습니다. 주로 폰트 설정, body 태그 스타일 초기화 등 전역적인 스타일을 정의할 때 사용합니다./* src/styles/globals.css */body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, .. 2025. 9. 17. [NextJs] Chapter 5: API Routes - Next.js로 만드는 미니 백엔드 Chapter 5: API Routes - Next.js로 만드는 미니 백엔드Next.js는 프론트엔드 프레임워크이지만, 간단한 백엔드 API 서버 기능도 내장하고 있습니다. Spring Boot 프로젝트를 따로 만들지 않고도, Next.js 프로젝트 내에서 직접 API를 만들고 호출할 수 있습니다.1. pages/api 폴더의 역할src/pages/api 폴더 안에 만드는 파일들은 페이지가 아니라 API 엔드포인트가 됩니다. Spring의 @RestController와 같은 역할을 합니다.src/pages/api/hello.js → /api/hello 라는 API 엔드포인트가 생성됩니다.src/pages/api/posts/[id].js → /api/posts/1 처럼 동적인 API 엔드포인트도 만들 수.. 2025. 9. 17. [NextJs] Chapter 4: 핵심 개념 (3) - 데이터 렌더링 전략 Chapter 4: 핵심 개념 (3) - 데이터 렌더링 전략Next.js의 가장 강력하고 핵심적인 기능입니다. "언제, 어디서 HTML 페이지를 그릴 것인가?"에 대한 다양한 선택지를 제공합니다. 페이지의 성격에 따라 최적의 렌더링 방식을 선택하여 성능을 극대화할 수 있습니다.1. SSG (Static Site Generation): getStaticProps개념: npm run build 시점에, 즉 빌드 타임에 데이터를 미리 가져와서 HTML 페이지를 생성해두는 방식입니다.동작: 사용자가 요청하면 이미 만들어진 HTML 파일을 즉시 제공합니다. CDN에 캐시되기 때문에 속도가 매우 빠릅니다.Spring 비교: Spring 프로젝트를 빌드할 때, 특정 데이터를 DB에서 조회하여 완성된 HTML 파일(p.. 2025. 9. 17. 이전 1 2 다음 반응형