리액트를 공부하다 보면 seo최적화 문제를 한 번쯤 듣게 되거나 경험하게 됩니다(저도 그랬고요)
이때 next.js를 사용하면 react hook이라던지 기능들을 사용하면서 해결할 수 있다고 합니다
오늘은 next.js에 대해 포스팅하겠습니다
1. next.js란 무엇인가?
next.js 공식 홈페이지에 들어가면 이렇게 적혀있습니다 "웹을 위한 리액트 프레임워크로 세계적인 여러 대기업들이 사용하며 next.js는 리액트 컴포넌트의 강력함을 바탕으로 고품질 웹 애플리케이션을 만들 수 있다고 합니다"
next.js는 2016년 10월에 처음 출시된 풀스택 프레임워크입니다
말 그대로 프론트엔드와 백엔드를 다루는 프레임워크로 프론트엔드 부분에서는 react를 사용하게 됩니다
next.js는 기본적으로 서버 사이드 렌더링 (ssr)을 지원함으로써 서버 쪽에서 자바스크립트를 실행하고 브라우저에서
완성된 html을 받으므로 검색엔진에 친화적이라고 합니다
2.리액트와 비교
리액트의 경우 클라이언트 사이드 렌더링(csr)로 브라우저에서 자바스크립트를 실행하여 페이지가 나오며
페이지 전환 시 서버 요청을 최소화해 앱처럼 부드럽게 동작이 가능합니다
다만 클라이언트 사이드 렌더링의 경우 SEO 측면에서 검색 엔진이 자바스크립트 실행 전 페이지 내용을 못 읽을 수 있는 일이
있다고 하여 불리하다고 도합니다
-CSR을 사용하면 검색엔진에 파악이 진짜 안 될까?
불리한 건 맞지만 안 되는 건 아닙니다
구글 검색엔진의 경우 자바스크립트 기반 페이지를 크롤링하고 인덱싱 할 수 있다고 합니다
다만 페이지에 렌더링 과정의 제약이 있으면 불확실하게 반영될 수도 있다고 합니다
중요한 콘텐츠나 seo가 핵심인 부분은 따로 ssr이나 Pre-rendering 전략을 사용하면 안정적일 것 같습니다
네이버 검색엔진 또한 SEO관련 문제를 염려하여 노력하고 있는 것 같습니다
가이드에 따르면 최근에 자바스크립트 기술 발전으로 인에 react와 같은 spa(single page application)로 제작된 사이트의 수집 및 색인을 지원하고 있다고 합니다
하지만 기존 전통적인 html페이지 보다 많은 리소스가 필요한 작업이므로 seo에 중요한 페이지는 서버 사이드 렌더링을 권장하는 것 같습니다 (단순히 spa기반 사이트라고 검색에 노출되지 않는다고 판단하면 안 된다고 명시되어있습니다)
출처 자료
https://searchadvisor.naver.com/guide/seo-advanced-javascript
자바스크립트 검색 최적화
대부분의 웹 사이트는 사용자 경험을 향상시키기 위해서 자바스크립트를 사용하고 있습니다. 최근에는 자바스크립트 기술이 발전됨에 따라서 많은 개발자들이 사이트 구축 시 Angular, React, Vue.js
searchadvisor.naver.com
3. next.js 설치 방법
설치를 시작하기 전에 2025년 8월 기준 node.js 18 버전 이상이 필요합니다
npx create-next-app@latest .프로젝트 세팅할 경로에서 해당 명령어를 입력하면 설치가 시작된다
latest는 최신 버전을 말하면 점은 현재 경로에 설치한다를 뜻한다
명령어를 입력하고 나면 ok to proceed? 15 버전을 설치할 거냐고 묻는다
그리고 프로젝트 세팅 어떻게 할지 묻는데 이 부분이 중요하다
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
1.프로젝트 이름은?
2.타입스크립트를 사용할것 인지?
3.eslint(코드 분석 도구)사용 할건지?
4.Tailwind CSS? 사용 여부
5.src디렉토리에다가 소스 코드를 저장할건가요?
6.앱라우터 방식으로 개발할건지
7.터보팩 사용여부
8.import alias(긴 파일 경로 간단히 표현)사용여부
9.어떤 import 별칭(alias)을 설정하고 싶은지? 기본값은 @/*설치하고 세팅의 질문은 위에화 같다
eslint는 코딩 스타일 위반 사항 코드오류 등 탐지해 주고 App Router는 파일 시스템 기반 라우터로, React의 최신 기능을 활용한다고 하며 예전에는 페이지 라우터 방식을 사용했다고 한다
App Router의 경우 최신의 나온 거며 페이지 라우터랑 개발 방식이 다르므로 본인에 맞는 걸로 선택해야 된다
(개인적으로 프로젝트, 공부할 거면 그냥 앱라우터에 yes 누르면 될 듯하다)
- 터보팩(Turbopack)
터보팩은 next.js13부터 도입된 모듈 번들러라고 함.
기존에 사용하던 웹팩보다 빠르며 rust언어로 개발되었다고 합니다
빌드 및 개발 서버 재시작 속도가 매우 빨라 로컬 환경에서 좋을 것 같긴 하지만
지원되지 않는 기능도 있고 아직 안정화되지 않다는 말도 있으니 규모가 있거나 신중히 개발해야 된다면
알아보고 써야 될 듯하다(로컬에서 개인적으로 공부할 거면 설치하면 될 듯하다.. 저는 설치함)
-import alias란?
import alias(임포트 별칭)는 자바스크립트나 타입스크립트에서 파일 경로를 더 짧고 간편하게 사용할 수 있도록 별칭을 지정하는 기능입니다.
import Button from '../../components/Button';긴 경로를 아래와 같이 바꿀 수 있는 듯
import Button from '@/components/Button';경로 관리가 훨씬 편해지고, 프로젝트 규모가 커져도 코드 유지보수가 쉬워진다고 합니다
4. 실행 방법
위에 설명대로 세팅을 선택했다면 아래 명령어를 입력하면 기본적으로 3000번 포트에서 실행됩니다
npm run dev
