[#. React] React에서 Next.js를 써야 하는 이유, yarn/create-next-app으로 Next.js 시작하기 1

 

 

 

 

 

React 프로젝트는 CRA를 사용해 왔다

기본적으로 SPA(Single Page Application)로 CSR(Client Side Rendering) 방식인데, 사이트 규모가 커지게 되면 초기에 로딩 하게 되는 JS 파일의 크기가 늘어나 초기 로딩 시간이 늘어난다는 단점이 있다구글과 같은 크롤링 봇은 JS가 실행된 이후의 결과 값을 크롤링 하지만 모든 검색엔진의 크롤링 봇이 JS 스크립트를 지원하지 않기 때문에 SEO(검색 엔진 최적화) 관련 문제도 발생한다

그에 비해 SSR은 서버에서 렌더링을 끝나고 완성된 HTML 문서를 전송하기 때문에 SEO 최적화에는 도움이 된다 

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크다

 

 

CSR, SSR에 대한 자세한 설명은 아래 글을 참고하자

 

https://developer0809.tistory.com/69

[#. ] CSR(Client Side Rendering)과 SSR(Server Side Rendering)이란? 차이점

 

 

 

 

 

 

Next.js 장점

 

 

 

❶

기존에 CRA로 개발했을 때는 index.js만 불러와서 SPA 방식으로 라우팅에 따라 컴포넌트를 교체하는데,

Next.js로 개발하게 되면 pages 디렉토리에 있는 파일을 기준으로 라우터별로 다른 페이지로 넘어가게 된다

또한 Next.js에서 지원해 주는 Head 등을 통해 메타 태그를 입력해 주면 SEO에 문제가 없다

 

 

 

 

 

❷

Next.js 는 자동으로 코드스플리팅을 한다

그래서 각 페이지는 오직 그 페이지에 필요한 것들만을 불러온다 이는 홈페이지가 렌더링 될 때, 다른 페이지들을 위한 코드들을 처음에 같이 로드하지 않는다

이것은 수백 개의 페이지를 추가하더라도 홈페이지가 빠르게 로드됨을 보장한다

오직 요청한 페이지의 코드만을 로딩한다는 것은 그 페이지가 고립되었음을 의미하고, 만약 특정 페이지에서 에러가 발생해도 다른 나머지 페이지들은 여전히 작동할 것이다

더욱이, Next.js의 프로덕션 빌드 내, 브라우저의 뷰 포트에서 'Link' 컴포넌트가 등장 할 때는 언제나 Next.js가 백그라운드에서 링크된 페이지를 위해 자동으로 코드를 프리패치한다.

링크를 클릭할 때까지 도착 페이지를 위한 코드들이 백그라운드에 미리 로드되어 있을 것이며, 페이지 전환이 거의 즉시 이루어질 것이다

 

 

 

 

 

 

 

 

 

① yarn으로 Next.js 시작하기

 

⑴ yarn 설치(MAC 기준)

 

brew install yarn	// node 없을 때

npm install --global yarn	// node 있을 때 

 

 

 

 

 

⑵ yarn으로 react 시작하기

 

mkdir react-next
yarn add react react-dom next

 

 

Next.js 에서페이지들은 파일 이름에 따라 라우팅 되기 때문에, pages 디렉토리가 꼭 있어야 한다  

 

mkdir pages

 

package.json 파일 수정 

 

  "scripts": {
    "dev": "next"
  }

 

위 코드를 추가한 후 

 

yarn run dev

 

명령어를 입력하고

localhost:3000에 접속해 보면

 

 

이렇게 404 페이지가 뜰 것이다

잘한 게 맞다

 

 

 

 

⑶ pages/index.js 생성

 

import Link from 'next/link'

const Index = () => (
  <div>
    <p>Hello Next.js!</p>
    <Link href="/first-post">first-post 페이지로 가기</Link>
  </div>
)

export default Index

 

이렇게 파일을 추가해 주면

 

 

localhost:3000에서 이렇게 잘 뜰 것이다

 

 

 

 

 

 

 

② create-next-app으로 Next.js 시작하기

 

⑴ create-next-app으로 시작하기 

 

npx create-next-app react-next

 

 

 

 

create-next-app을 이용하면 이렇게 구조를 자동으로 잘 생성해 준다