지금까지 배운 React는 CSR(Client Side Rendering) 방식으로 동작해요! 즉 서버에서 브라우저로 전달되는 HTML 파일에는 일부 정보만 담겨있고, 나머지 정보는 브라우저에서 JavaScript를 통해 가져오는 방식이예요! 이러한 이유로 초기 로딩 속도가 느리고, 검색 엔진 최적화(SEO)가 어렵다는 단점이 있어요. 이번 시간에는 이러한 단점을 보완하기 위해 React에 SSR(Server Side Rendering)을 적용한 Next.js를 알아봅시다!

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

📚 공부할 내용

  • Next.js 공식문서
  • [손에 익는 Next.js] 공식 문서 훑어보기
    • 인프런 아이디는 skkuding2@gmail.com이고 비밀번호는 노션 신규 팀원 스터디 페이지에 있어요!
  • 어서 와, SSR은 처음이지? - 도입편
    • 네이버 블로그에 SSR을 도입하게 된 이유를 주제로 SSR을 설명하고 있어요!
    • SSR을 이해하는데 도움이 될 거예요!
  • Next.js 프로젝트 영상
    • 하나의 프로젝트를 처음부터 끝까지 만드는 영상이에요! 지금은 이거를 전부 할 필요는 없고, 현재로서는 34:20까지 보아도 Next.js의 기본적이면서 중요한 기능들을 배울 수 있어요!(영상을 보면서 해당부분 공식문서도 함께 읽어보면 더욱 좋아요!)
    • (해당 링크 영상은 javascript로 프로젝트를 진행하지만, 해당 유튜브채널 들어가보면 typescript로 진행하는 프로젝트도 많습니다!)

🎯 프로젝트 실습

지금까지 만들었던 프로젝트를 Next.js로 전환해요!

1. Next.JS 프로젝트 생성

  1. npx create-next-app 또는 pnpx create-next-app 명령어를 통해 Next.js 프로젝트를 생성해요.
    1. App router, typescript, tailwindcss는 선택해주세요!
    2. src 옵션은 선택하지 않아요!
  2. npm run dev 또는 pnpm run dev 명령어를 통해 프로젝트를 실행해요.

2. Next.JS 프로젝트에 React 프로젝트 이식

  1. 저희는 메인 페이지와 디테일 페이지가 있으니 디테일 페이지를 위한 route를 추가해요.
  2. app 폴더 안에 폴더를 만들면 자동으로 route를 생성하기 때문에 components 폴더는 app 폴더 밖에 만들거나 .components로 이름을 지어야 해요.
    1. .으로 시작하는 폴더는 자동으로 route를 생성하지 않아요.
  3. 디테일 페이지에 쓰던 GraphQL은 이번 프로젝트에서 사용하지 않고 더미 데이터를 사용해주세요!
    1. 이번 실습에서는 GraphQL을 사용하지 않아요!
  4. 메인 페이지에 쓰던 axios는 fetch로 대체해주세요!
    1. 이번 실습에서는 axios를 사용하지 않아요!
    2. Next.JS에서는 캐싱과 같은 기능을 추가한 fetch를 사용해요!
    3. fetch한 데이터를 console.log 찍으면 서버 터미널에서 확인할 수 있어요!
      1. 왜 일까요??

3. Next.JS가 제공하는 기능 사용

  • 포켓몬 이미지를 Next.JS가 제공하는 Image 컴포넌트로 대체해주세요!
  • 기존 a 태그를 Link 컴포넌트로 대체해주세요!
    • 언제 prefetching이 발생하는지 확인해보세요! (공식 문서에 나와있어요!)
  • Next.js가 제공하는 Font 컴포넌트를 사용해서 Noto sans KR로 폰트를 변경해주세요!
    • Next.js의 Font 컴포넌트는 어떠한 이점이 있을까요?