[Next.js] 기본 개념 알아보기

next.js 기본 개념 알아보기

• next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다.

서버사이드 렌더링을 함으로 얻는 이득은 다음과 같다.
1. 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게된다. 이때까지 사용자는 많은 시간을 대기해야 한다.

2. seo 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않는다. 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔지으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 된다.

해결방법
위의 두가지를 해결하는 것이 서버렌더링이다.
1. 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 된다[로딩시간 감소]

2. 검색엔진이 자바스크립트를 읽는 것이 아닌 서버 측에서 자바스크립트, html, css를 만들어 컨텐츠를 직접 업로드 함으로 검색엔지에 게시글이 걸리게 된다. 또한 meta 태그를 자유롭게 추가함으로 seo를 용이하게 할수 있다.

next.js가 제공하는 주요 기능

hot reloading

• 개발 중 저장되는 코드는 자동으로 새로고침된다.

automatic routing

• pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다. public 폴더도 pages의 폴더와 동일하게 라우팅 할 수 있다. 그러나 모든 사람이 페이지에 접근할 수 있으므로 지양하도록 한다.

single file components

• style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다.
• "style jsx global"을 사용하면 글로벌로 스타일 정의가 가능하다.

// styled-jsx

function Heading(props) {
  const variable = "red";
  return (
    <div className="title">
      <h1>{props.heading}</h1>
      <style jsx>
        {`
          h1 {
            color: ${variable};
          }
        `}
      </style>
    </div>
  );
}

export default function Home() {
  return (
    <div>
      // red
      <Heading heading="heading" />
      // block
      <h1>ttt</h1>
    </div>
  );
}