1. Next.js
Next.js 는 리액트(react)로 만드는 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크이다.
서버 사이드 렌더링(SSR)은 말 그대로 서버에서 자바스크립트를 렌더링 하는 것을 의미한다.
리액트의 경우 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이기 때문에
자바스크립트를 클라이언트에서 로드한다.
즉, 사용자가 웹사이트를 요청하면 우선 빈 html을 가져오고 스크립트를 로딩한다.
따라서 자바스크립트가 모두 로드될 때까지 기다려야만 웹을 볼 수 있기 때문에 첫 로딩 시간이 오래 걸리고,
검색 엔진 최적화(SEO, Search Engine Optimization)에 취약하다.
반면, 서버 사이드 렌더링(SSR)의 경우 서버에서 자바스크립트를 로딩한다.
따라서 첫 페이지 로딩 속도가 CSR에 비하여 빠르며, 검색 엔진 최적화가 가능하다.
물론, SSR의 단점도 존재한다.
서버 사이드 렌더링은 클라이언트가 서버에 데이터를 요청할 때마다
서버에서 새로운 화면을 만들어 제공하기 때문에, 초기 로딩 이후에는 CSR보다 속도가 느리다.
따라서 검색 엔진 최적화가 따로 필요 없는 관리자 화면 같은 경우엔 next.js보다 react를 사용하는 것이 더 좋을 수 있다.
(react에서 next.js 없이 ssr을 구현하는 것도 가능하다.)
2. Next.js의 주요 기능
1) Automatic Routing
넥스트(next.js)의 가장 큰 특징은 pages 폴더에 있는 파일이 해당 파일 이름으로 라우팅 된다는 것이다.
/public
favicon.ico
img1.png
/src
/components
/common
Header.tsx
/pages
index.tsx
page1.tsx
위는 next.js의 폴더 경로 예시이다.
보면 pages라는 폴더가 보이는데, next.js에선 대항 폴더에 있는 파일들은 바로 페이지화된다.
주소창에 /index를 입력하면 index.tsx가 출력되고, /page1을 입력하면 page1.tsx가 출력된다.
2) Single File Components
function Heading(props) {
const variable = "red";
return (
<div className="title">
<h1>{props.heading}</h1>
<style jsx>
{`
h1 {
color: ${variable};
}
`}
</style>
</div>
);
}
style jsx를 사용함으로써 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.
3) Global Style
// _app.tsx
import "./globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component ponent {...pageProps} />;
}
_app.tsx 파일을 이용하면 글로벌 스타일을 정의할 수 있다.
다른 컴포넌트에서 글로벌 스타일을 지정할 경우 오류가 발생할 수 있으므로 반드시 _app.tsx 파일에서만 정의해야 한다.
3. Next.js Components (컴포넌트)
1) _documents.tsx
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
export default function CustomDocument(){
return (
<Html>
<Head>
// 모든페이지에 아래 메타테크가 head에 들어감
// 루트파일이기에 가능한 적은 코드만 넣어야함
//전역 파일을 엉망으로 만들면 안된다
// 웹 타이틀, ga 같은것 넣음
<meta property="custom" content="123123" />
</Head>
<body>
<Main />
</body>
<NextScript />
</Html>
);
}
}
meta 태그를 정의하거나, 전체 페이지에 관여하는 컴포넌트이다.
_documents.tsx 파일은 페이지 구성 요소만 반영되고, 자바스크립트는 반영하지 않기 때문에
해당 파일에서 정의한 conosle은 서버에서만 보이고 클라이언트에선 보이지 않는다.
2) _app.tsx
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
_app.tsx는 최초로 실행되는 페이지이다. 따라서 모든 페이지에 영향을 준다.
쉡게 설명하면 공통 레이아웃이라 볼 수 있다.
내부 컴포넌트가 있다면 해당 컴포넌트를 전부 실행하고 html의 body로 구성한다.
_app.tsx가 실행된 후 _documents.tsx가 실행된다.
_app.tsx의 경우 console.log를 실행하면 server와 client 둘 다 확인할 수 있다.