[Next.js 챌린지] DAY3

정재은·2024년 9월 12일

API Routes next.js 네비게이팅 프리페칭

Next.js 챌린지

목록 보기

3/16

한 입 크기로 잘라먹는 Next.js(15+)

# Section2

3. 네비게이팅

방법1) <Link> 태그 사용

CSR방식으로 이동하기 때문에 빠르고 쾌적하다

import {Link} from 'next/app';

export default function App(){
  return (
    <>
    	<Link href={'/test'}>test 페이지</Link>
    </>
  );
}

특정 버튼이 클릭되거나 특정 조건이 만족되었을 때 함수 내부에서 페이지를 이동시키는 방식
ex) onClick 이벤트

import { useRouter } from 'next/router';

export default function App(){
  const router = useRouter();
  const onClickButton = () => {
    router.push('/test');
  };
  
  return (
    <>
    	<div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
    </>
  );
}

4. 프리페칭 Pre Fetching

프리페칭이란?

페이지를 사전에 미리 불러온다
빠른 페이지 이동을 위해 제공되는 기능
즉, 이동할 가능성이 있는 모든 페이지를 미리 불러오는 것

Next.js는 자동으로 우리가 작성해놓은 컴포넌트를 페이지별로 분리해서 미리 저장해둔다

초기 접속 : 서버 측에서 JS Bundle을 보내올 때 현재 요청한 페이지의 JS Bundle만 전달한다
(용량 경량화로 인해 수화시간 단축)
초기 접속 이후 : 페이지 이동 요청이 이루어지기 전에 Pre Fetching발생
연결된 모든 페이지의 JS Bundle을 불러온다
현재 페이지에서 이동할 수 있는 모든 페이지들에 대한 JS 코드를 사전에 다 불러와놓게 된다

프리페칭 확인하기

$ npm run build 빌드 → $ npm run start 실행 → 개발자도구 → 네트워크 탭

⁕ $ npm run dev 에서는 작동하지 않는다
⁕ 간혹 JS를 다시 불러오는 경우가 있는데 이런 경우는 캐시가 만료되었기 때문이다

프리페칭이 안되는 경우

<Link> 컴포넌트로 명시된 경로가 아니라면 프리페칭이 되지 않는다
이런 경우에는 화면에 마운트 되었을 때 실행할 동작을 정의해주어야 한다

useEffect와 router객체의 prefetch메서드를 사용하여 프리페칭 하도록 코드를 작성한다

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function App(){
  const router = useRouter();
  const onClickButton = () => {
    router.push('/test');
  };
  
  // useEffect + router객체의 prefetch메서드
  useEffect(() => {
    router.prefetch('/test');
  }, []);
  
  return (
    <>
    	<div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
    </>
  );
}

$ npm run build → $ npm run start 를 다시 실행하여 개발자도구의 네트워크 탭을 확인한다

프리페칭 해제하기

<Link> 컴포넌트는 자동으로 프리페칭이 되는데 이것을 해제하려면
prefetch={false} 를 추가해주면 된다

<Link href={'/test'} prefetch={false}>test 페이지</Link>

5. API Routes

Next.js에서 API를 구축할 수 있게 해주는 기능

src/pages/api 폴더 안에 있는 파일들은
페이지가 아니라 자동으로 API 응답을 정의하는 기능으로 설정된다

실습

개발모드로 시작 $ npm run dev
http://localhost:3000/api/hello 접속

src/pages/api 폴더안에 time.ts 파일 생성
http://localhost:3000/api/time 접속

// 📄time.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const data = new Date();
  res.json({ time: data.toLocaleString() });
}

6. 스타일링

Next.js에서는 App 컴포넌트가 아닌곳에서 import 문을 통해 CSS 파일을 불러오는 것을 제한한다

다른 페이지에 작성된 CSS 코드와 충돌을 일으킬 수 있기 때문인데
import CSS 대신 CSS Module을 사용한다

CSS Module

CSS Module은
① 기존의 CSS 파일을 모듈처럼 사용할 수 있게 해주고
② className이 자동으로 유니크하게 생성되어 className이 겹치지 않게 해준다

index.module.css 파일 생성

// 📄index.module.css
.h1{
   color : green;
}

// 📄index.tsx
import style from './index.module.css';

export default function Home() {
  return <h1 className={style.h1}>인덱스</h1>;
}

출력결과

유니크한 className

정재은

프론트엔드

이전 포스트

[Next.js 챌린지] DAY2 페이지라우터

다음 포스트

[Next.js 챌린지] DAY3