본문 바로가기
카테고리 없음

[React] next.js

by hbIncoding 2023. 7. 19.

1. next js란

 1. 기본 개념

  • nextjs는 React로 만드는 서버사이드 렌더링 프레임워크이며, 서버사이드 렌더링으로 얻는 이득은 아래와 같다.
    • 클라이언트 렌더링의 경우 모든 js 파일을 로드하여 사용자가 웹을 보게 됨, 이때까지 많은 시간을 대기해야함
    • seo 문제 : 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 안보임, 구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 된다.
    • 결론 : 클라이언트 측에서 자바스크립트 로딩시간을 줄이고, 서버측에서 JS, htm, css를 만들어 컨텐츠를 직접 업로드 함으로 검색엔진에 게시글이 걸리게 된다.
    • 또한 meta 태그를 자유롭게 추가함으로 seo를 용이하게 할 수 있다.

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

  • hot reloading : 개발 중 저장되는 코드는 자동으로 새로고침된다.
  • automatic routing : pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다.
    • pages/page1.tsx -> localhost:3000/page1
    • public폴더도 가능하나 모든 사람이 페이지에 접근할 수 있으므로 지양하자
  • single file components : style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.
    • <style jsx global>을 사용하면 글로벌 스타일 정의 가능, app.tsx에서만 정의 가능
  • server landing : 서버 렌더링, 클라이언트 렌더링과 다르게 서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있다.
  • code splitting : dynamic import를 이용하면 쉽게 코드 스플리팅이 가능하다. 
    • 코드 스플리팅 : 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나위어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선 할 수 있음
  • typescript 활용을 위해 웹팩을 만지거나 바벨을 만질 필요없다. 
  • _document.tsx : meta 태그를 정의하거나, 전체 페이지에 관려하는 컴포넌트
    • 이곳에서 console은 서버에서만 보이고 클라이언트에서는 안보인다.
    • render 요소는 반영하지만 페이지 구성 요소만 반영되고, js는 반영 하지 않기 떄문에 console은 안보인다. 즉 componentDidmount 같은 훅도 실행 되지 않기에 정말 static한 상황에만 사용
  • _app.tsx : 이곳에서 렌더링 하는 값은 모든 페이지에 영향을 주며, 최초로 실행된다.
    • app.tsx는 클라이언트에서 띄우길 바라는 전체 컴포넌트 -> 공통 레이아웃임으로 최초로 실행되며 내부 컴포넌트들을 실행함
    • 내부 컴포넌트가 있다면 전부 실행하고, html의 body로 구성
    • Component, pageProps를 받는다.
      • 여기서 props로 받은 Component는 요청한 페이지이다. GET '/'요청을 보냈다면 ,component에는 '/pages/index.js' 파일이 props로 내려오게 된다.
      • pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 말한다.
    • 그 다음 _document.tsx가 실행됨
    • 페이지를 업데이트 하기 전에 원하는 방식으로 페이지를 업데이트 하는 통로
    • _app.tsx에서 console.log 실행 시 client, server 둘다 찍힌다.
  • import style component
  • sass : 따로 config파일을 정의하지 않고 css파일을 scss파일로 바꾸고 yarn add sass --dev 하면 알아서 nextjs가 설정
  • Link 사용하기 : 페이지간 이동은 보통 a 태그를 사용하나 next에서는 사용안함
    • a태그 사용 시 첫 페이지 진입 시 번들 파일을 받고, a태그에 의해 라우팅 되면 다시 번들 파일을 받는다. 또한 redux를 쓰는 경우 store의 state 값이 증발되는 현상도 일어난다. 그렇기에 a 태그는 전혀 다른 사이트로 이동시켜 다시 돌아오지 않을 경우에만 사용하고 그 외에는 Link 태그를 사용한다.
import Link from "next/link";

const Index = () => (
  <div>
    <Link href="/blog">
      <a>Blog</a>
    </Link>
    // 동적 link시 [] 사용
    <Link href="/blog/[address]">
      <a>Blog</a>
    </Link>
  </div>
);
  • 동적 url (dynamic route) : 동적 url을 지원하고 [] 문법으로 동적 페이지는 생성하는 동적 url을 만들 수 있음
    • 아래 처럼 작성하면 localhost:3000/123으로 접속시 pages/[값].tsx 페이지의 구조 값은 router.query.값 과 동일
// pages/[id].tsx

import { useRouter } from "next/router";

export default () => {
  const router = useRouter();

  return (
    <>
      <h1>post</h1>
      <p>postid: {router.query.id}</p>
    </>
  );
};
  • Optional catch all routes
    • dynamic route 를 사용하고 싶지 않을 때, dynamic page를 optional하게 주는 문법을 사용하면 된다.
    • [[...page]].tsx와 같은 형식으로 파일을 만들면 됩니다. [page].tsx와 다른 점은 router.query.page의 값이 배열로 담기는 것입니다.
    • 예를들어 page/test/[[...page]].tsx 가 경로일때, url을 /test/1/2/3으로 들어왔다면 roueter.query.page의 값은 ['1','2','3']이렇게 들어오게 됩니다.
    • roueter.query.page의 타입은 undefined, string, string[]으로 페이지 변경에 따라 보여줄 컴포넌트가 다르다면 이 세타입에 대한 조건을 모두 걸어줘야합니다.
  • prefetching : 백그라운드에서 페이지를 미리 가져온다. 기본값은 true
    • <Link /> 뷰포트에 있는 모든 항목이 미리 로드 된다.
    • 정적 생성을 사용하는 JSON페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 파일을 미리 로드한다.
    • <Link prefetch href="...">형식으로 전달해주면 데이터를 먼저 불러온 다음에 라우팅을 시작한다.
    • 프로덕션 레벨에서만 이루어진다.
  • 그외 
    • next/route 사용
    • gitInitialProp()을 통해 컴포넌트에 데이터 보내기
    • server side lifeCycle
    • custum 태그로 head 태그 옮기기
    • dynamic meta tag
    • dynamic component import
    • ....

2. 참조

1)nextjs 정리 : https://kyounghwan01.github.io/blog/React/next/basic/#dynamic-component-import

저작자표시

티스토리툴바