[Next.js] Next.js 맛보기
반응형
🎯 Next.js 맛보기
- Next.js는 React 기반으로 서버 사이드 렌더링을 구현을 쉽게 할 수 있도록 도와주는 프레임워크다.
- SSR(Server Side Rendering) 이란 말 그대로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
- SSR을 이용하면 Node 서버에서 리액트 컴포넌트를 만들고 만들어진 HTML 요소를 브라우저로 전송하게 된다.
- Next.js는 서버사이드 렌더링에 필요한 거의 모든 기능을 지원하는 좋은 프로젝트다. Next.js의 중요한 특징은 페이지를 기반으로 빌드한다는 것이다.
- 첫 페이지를 서버에서 받으면 (내용이 모두 채워져 있는 html 파일을 받으면) 검색 엔진 최적화가 가능하며 사용자가 화면을 보는 시간도 빨라진다.
📝 Next.js 셋업
📕 패키지 설치
npm install next react react-dom
📕 package.json 에 scripts 항목을 추가
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
📕 Next 개발 서버 실행
npm run dev
📕 페이지 컴포넌트화
- Next.js는 페이지를 기반으로 빌드하기 때문에
pages폴더 내에 있는 파일 이름을 기반하여 라우팅이 동작된다. pages라는 디렉터리를 만들고 컴포넌트를 만들면 된다.
📝 Next.js로 SSR 페이지 라우팅
- React에서의 Next.js를 사용하면 SSR, CSR을 혼합하여 적용할 수 있다.
- Next가 제공하는
next/link나next/router를 사용해서 내부적으로 CSR을 동작해보자.
🛠 pages/home.js
import React from "react";
export default function home() {
return <h1>home</h1>;
}
🛠 pages/index.js
import React from "react";
import Link from "next/link";
function HomePage() {
return (
<>
<li>
<Link href={"/home"}>home으로 갑니다!</Link>
</li>
</>
);
}
export default HomePage;
🛠 package.json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^12.0.8",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
- 이렇게 되면 CSR이 동작할 때 해당하는 js 파일이 실행되어 처음에 받은 index.js 파일 내의 html을 그대로 유지한 채 DOM 내용이 변경되는 것을 확인할 수 있다.
📌 참고
반응형