TIL 22-06-24

thisisyjin·2022년 6월 24일

next.js

TIL 📝

목록 보기

68/113

Next.js

공부 기간 : 6/18 - 6/24

📝 새롭게 알게된 내용 위주로 기록 (ing)

React로 만드는 서버사이드 렌더링 프레임워크. (SSR)

서버사이드 렌더링

클라이언트 렌더링은 사용자 측에서 많은 대기가 필요함.
또한 클라이언트 사이드의 경우 js가 로드되지 않으면 아무런 정보도 보이지 않아
SEO 문제도 발생함.
-> 아무 페이지도 검색 엔진에 스캔되지 않음.

+) <meta> 태그를 추가하여 SEO를 용이하게 할 수 있음.

next.js 주기능

1. Hot Reloading

개발 중 저장되는 코드 자동 새로고침

2. automatic routing

/pages 폴더에 있는 파일은 해당 이름으로 라우팅됨.

예> /pages/page1.tsx -> localhost:3000/page1

3. single file components

<style jsx>를 사용하여 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css 설정 가능.

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>
      <Heading heading="heading" />
      <h1>Hello</h1>
    </div>
  );
}

위 css는 Home 컴포넌트에서만 스코프를 가짐.
-> <style jsx> </style> 사이에 ``안에 css를 작성함.

여기서 js에서 선언한 변수를 ${ }로 템플릿 리터럴처럼 사용 가능.

servel landing

서버 렌더링.
client 사이드 렌더링과 달리 서버렌더링 한 페이지의 소스를 보면 내부에 소스가 존재함.

code splitting

dynamic import 를 이용한 코드 스플리팅 가능.

코드 스플리팅 은 자신이 원하는 페이지에서 JS와 라이브러리릉 렌더링하는 것.
-> 모든 번들이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 로딩 시간 개선 가능.

typescript

타입스크립트 사용시 webpack, babel 설정 필요 없음.
typescript 설치 후 yarn add @types/node @types/react 명령어로
패키지 설치 후 yarn run dev 로 실행
-> 자동으로 tsconfig, next-end.d.ts가 생성됨!

_document.tsx

meta 태그를 정의하거나, 전체 페이지에 관여하는 컴포넌트.

/pages/_document.tsx

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta property="custom" content="123123" />
        </Head>
        <body>
          <Main />
        </body>
        <NextScript />
      </Html>
    );
  }
}

'next'의 document 를 가져오고, Html, Head, Main 그리고 NextScript 컴포넌트를 임포트한다.

기본적으로 html과 마찬가지로 html-head-body-script 순으로 나열한다.

meta 태그는 head의 내부에 작성하고, property와 content라는 props를 가진다.

❗️ 이 컴포넌트에서의 console.log는 서버에서만 보인다!
추가로, js는 반영하지 않으므로 static한 상황에만 사용한다.

_app.tsx

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

렌더링 하는 값은 모든 페이지에 영향을 준다.
최초로 실행되는 것 = _app.tsx
-> 최초 실행시 내부 컴포넌트들을 실행함.

import style component

import styles from "./style.module.css";

function Heading(props) {
  return (
    <div className="title">
      <h1 className={styles.red}>{props.heading}</h1>
    </div>
  );
}

export default function Home() {
  return (
    <div>
      <Heading heading="heading" />
      <h1>Style 적용하기</h1>
    </div>
  );
}

동적 URL

[] 문법으로 동적 페이지를 생성하는 동적 URL 생성 가능

/pages/[id].tsx

import { useRouter } from "next/router";

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

  return (
    <>
      <h1>post</h1>
      <p>postid: {router.query.id}</p>
    </>
  );
};

next/router에서 useRouter을 임포트함.
useRouter() 을 통해 값을 가져오고,
router.query로 쿼리스트링중 id에 해당하는 값을 렌더링함
-> 리액트 라우터의 useParams() 같은 기능
만약 localhost:3000/610 으로 접속시 postid = 610 이 된다.

참고로 next/router과 react-router-dom의 사용법은 유사하다!

Prefetching

백그라운드에서 페이지를 미리 가져옴.
(기본값: true)
```
	
```

import { useEffect } from "react";
import { useRouter } from "next/router";
import posts from "../posts.json";

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

  const post = posts[router.query.id as string];
  if (!post) return <p>noting</p>;

  useEffect(() => {
    router.prefetch("/test");
  }, []);

  return (
    <>
      <h1>{post.title}</h1>
      <h1>{post.content}</h1>
      <button onClick={() => router.push("test")}>go to Test</button>
    </>
  );
};