next.js 공식문서 따라만들기

next.js

nextjs는 React로 만드는 서버사이드 렌더링(Server Side Rendering) 프레임워크

SSR

클라이언트로 전달될 HTML 파일 내용(일부를) 미리 그려서 내려주는 것

클라이언트 렌더링의 속도를 빠르게 하여, 사용자 체감 속도 증진
검색 엔진이 JavaScript를 실행하지 않고 크롤링 가능

✅ 기본적으로 React는 CSR (Client Side Rendering)을 한다.

처음 웹사이트를 요청했을때 빈 html을 가져와 javasciprt를 로딩 한다
리액트는 index.html의 root div 안의 모든것이 javascript로 그려지기 때문에
검색엔진은 웹사이트를 분석하기 힘들다

실제 React로 만든 사이트를 자바스크립트를 사용하지 않고 load하면 페이지에 아무것도 표시 되지 않는다.

root div에도 아무것도 그려지지 않는다

반면 Next.js는 서버측에서 html파일 내용(일부를)미리 그려서 내려주기 때문에 화면이 표시가 된다

👍 크롬 개발자도구에서 javascript사용 중지를 했음에도 html이 그려져 있다

Next.js 설치 하기

기본 설치는 아래와 같이

$ npx create-next-app@latest

# or

$ yarn create next-app

하지만 공식문서 lesson을 보고 따라 할 것이므로

1	$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"

starter 코드를 설치 했다

pages & link

https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs

pages 폴더 안에 컴포넌트를 만들면

/컴포넌트이름 으로 url경로가 설정이 된다

pages 안에 posts 디렉토리를 만들고 first-post 컴포넌트를 만들어 주고 나서

import React from 'react';
import Link from 'next/link';
const FirstPost = () => {
  return (
    <>
      <div>FirstPost</div>
      <h2>
        <Link href='/'>
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  );
};

export default FirstPost;

일반 react 처럼 컴포넌트를 작성 후 localhost:3000/posts/first-post 로 접속하면 해당 컴포넌트가 보인다
➡️ 여기서 주의점은 export 할때의 컴포넌트 name이 아니라 jsx 파일의 name이 주소 라는 점

Link 태그는 react-router-dom의 Link와 같다

대신 to가 아닌 href를 사용한다는 것
안에 a태그는 안적어도 제대로 동작하는거 같다

공식 문서 마지막에 읽어보니 a태그의 속성을 사용하고 싶을때 예를 들어 target 이나 rel 같은 걸 Link에 작성하면 적용이 안된다.
그리고 className도 Link에 작성하면 적용이 안된다.. 그래서 Link 안쪽에 html 태그를 따로 작성 해주는 거 같다
a태그말고 다른 태그도 가능하다 div로 작성해도 Link는 제대로 작동 한다

<h1>
  <ul>
    <Link href='/posts/first-post'>
      <li>this Page</li>
    </Link>
    <Link href='/posts/Hello'>
      <li>Hello World</li>
    </Link>
  </ul>
</h1>

이런식으로 li에도 link를 줄 수 도 있다

1
2
3

<Link href='/posts/first-post' target='_blank' className='alink'>
  <a>this Page</a>
</Link>

Link 에 target과 className을 주면

아무것도 적용이 안된다.

a태그에 적용 시켜 보면

1
2
3

<Link href='/posts/first-post' >
  <a target='_blank' className='alink'>this Page</a>
</Link>

잘 적용 되어 있다.

코드 분할 및 프리페칭

Next.js는 자동으로 코드 분할을 수행해 각 페이지는 해당 페이지에 필요한 것만 로드한다 -> 홈페이지가 렌더링 될 때 다른 페이지의 코드는 처음에 로드 되지 않는다
Next.js의 프로덕션 빌드에서 Link 구성 요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 연결된 페이지에 대한 코드를 자동으로 미리 가져온다. -> 링크를 클릭할때 대상 페이지에 대한 코드가 이미 백그라운드에서 로드되어 있어 페이지 전환이 즉각적으로 이루어 진다

ㅇㅇㅈ Blog

Next.js 공식문서 따라만들기 (1)

next.js 공식문서 따라만들기

next.js

SSR

Next.js 설치 하기

pages & link