(작성중) next.js

next.js 기본개념

• next.js는 React로 만드는 서버 사이드 렌더링 프레임워크. Server Side Rendering을 함으로 얻는 이득은 다음의 두가지를 해결하는 것이다.
  (1) 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게 된다. 이때까지 사용자는 많은 시간을 대기해야 한다.
  → 서버에서 jsc를 로딩함으로 클라이언트 측에서는 jsc를 로딩하는 시간이 줄어들게 된다.
  (2) seo문제 : 클라이언트 사이드의 경우 jsc가 로드 되지 않은 경우 아무런 정보를 보이지 않는다, 구글의 검색엔진의 경우 jsc가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 된다.
  → 검색엔진이 jsc를 읽는 것이 아닌 서버 측에서 jsc, html, css를 만들어 컨텐츠를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 된다, 또한 meta 태그를 자유롭게 추가함으로 seo를 용이하게 할 수 잇따.
  

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

* hot reloding
	: 개발 중 저장되는 코드는 자동으로 새로고침된다.
    
* automatic routing
	: pages폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다. (pages/page1.tsx -> localhost:3000/page1)
	: public 폴더도 pages의 폴더와 동일하게 라우팅 할 수 있다.
* single file components
	: style jsx 를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.
    : <style jsx global> 를 사용하면 글로벌로 스타일정의 가능
    
    // styled-jsx
    const Heading = (props) => {
      const variabe = "red";
      return (
        <div className="title">
          <h1>{props.heading}<h1>
          <style jsx>
            { ... }
      )
    }
	export default function Home() {
      return (
        <div>
          (...)
        <div>
      )
    }

* Link 사용하기 
- 보통, 페이지 간 이동은 a 태그를 사용하지만 next에서는 사용하지 않는다.
- a 태그를 사용하면 처음 페이지에 진입시 번들