모던 리액트 Deep Dive - Next.js

⚡서버 사이드 렌더링 - 4.3 Next.js

4.3.1 Next.js란?

• 리액트 기반 프로젝트에서 서버 사이드 렌더링을 고려할때 가장 많이 선택함

4.3.2 Next.js 시작하기

💡Next.js 프로젝트 만들어보기

npx create-next-app@latest --ts

• 프로젝트 생성 후 npm run dev를 통해 접속하면 됨

🌕 package.json

• npm프로젝트를 볼때 package.json을 확인해야 함

🌕의존성
next : Next.js의 기반이 되는 패키지
elint-config-next : Next.js 기반 프로젝트에서 사용하도록 만들어진 ESLint설정

🌚next.config.js

• 프로젝트의 환경 설정을 담당

 

• pages/_app.tsx : 에러 바운더리를 사용해 애플리케이션 전역에서 발생하는 에러 처리
• pages/_document.tsx : 애플리케이션의 HTML을 초기화하는 곳
• pages/_error.tsx : 프로젝트 전역에서 발생하는 에러를 처리
• pages/404.tsx : 원하는 스타일의 404 페이지 정의
• pages/500.tsx  : 원하는 스타일의 500 페이지 정의
• pages/index.tsx

🌕서버라우팅과 클라이언트 라우팅의 차이 

• Next.js는 서버 사이드 렌더링을수행하지만 동시에 싱글 페이지 애플리케이션과 같이 클라이언트 라우팅 또한 수행

Next.js를 잘 활용하기 위해선
<a> 대신 <Link>를 사용
window.location.push 대신 router.push를 사용

4.3.3 Data Fetching

• 서버 사이드 렌더링 지원을 위한 몇 가지 데이터 불러오기 전략
•  pages/의 폴더에 있는 라우팅이 되는 파일에서만 사용할 수 있으며, 예약어로 지정되어 반드시 정해진 함수명으로 export를 사용해 함수를 파일 외부로 내보내야 함
• 서버에서 미리 필요한 페이지를 만들어서 제공하거나 해당 페이지에 요청이 있을 때마다 서버에서 데이터를 조회해서 미리 페이지를 만들어서 제공할 수 있음

💡getStaticPaths와 getStaticProps

• 사용자와 관계없이 정적으로 결정된 페이지를 보여주고자 할때 사용
• getStaticPaths, getStaticProps는 반드시 함께 있어야 사용 가능

💊getStaticPaths
/pages/post/[id]가 접근 가능한 주소를 정의하는 함수
💊getStaticProps
정의한 페이지를 기준으로 해당 페이지로 요청이 왔을 때 제공할 props를 반환하는 함수

💡 getServerSideProps

• 서버에서 실행되는 함수
• 무조건 페이지 진입전에 해당 함수가 실행됨
• 응답값에 따라 페이지의 루트 컴포넌트에 props를 반환할 수도, 또는 다른 페이지로 리다이렉트시킬 수도 있음
• JSON으로 제공할 수 있는 값만 props로 전달할 수 있음
• 반드시 JSON.stringify로 직렬화 할 수 있는 값만 제공해야 하고, 값에 대해 가공이 필요하다면 실제 페이지나 컴포넌트에서 해야함

💡 getInitialProps

• getStaticProps나 getServerSideProps가 나오기 전에 사용할 수 있었던 유일한 페이지 데이터 불러오기 수단
  제한적으로 사용되어야 하고,가급적이면 getStaticProps나 getServerSideProps를 사용

4.3.3 스타일 적용하기

// 적용하고 싶은 글로벌 스타일 
import ’../styles.css’

💡 전역스타일

• CSS Reset이라 불리는 브라우저에 기본으로 제공되고 있는 스타일을 초기화하는 등 애플리케이션 전체에 공통으로 적용하고 싶은 스타일이 있다면 _app.tsx를 활용하면 됨
• 글로벌 스타일은 다른 페이지나 컴포넌트와 충돌할 수 있으므로, 반드시 _app.tsx에서만 제한적으로 작성해야 함

💡 컴포넌트 레벨 CSS

• Next.js에서는 컴포넌트 레벨의 CSS를 추가할 수 있음
• [name].module.css와 같은 명명 규칙을 준수
• 다른 컴포넌트의 클래스명과 겹쳐서 스타일에 충돌이 일어나지 않도록 고유한 클래스명을 제공함

💡 SCSS와 SASS

• sass와 scss도 css를 사용했을 때와 동일한 방식으로 사용할 수 있음
• sass 패키지를 npm install --save-dev sass와 같은 명령어로 설치하면 별도의 설정 없이 바로 동일하게 스타일을 사용할 수 있음
• scss에서 제공하는 variable을 컴포넌트에서 사용하고 싶다면 export 문법을 사용하면 됨

💡 CSS-in-JS

자바스크립트 내부에 스타일 시트를 삽입하는 방식

4.3.5 _app.tsx 응용하기

• Next.js로 만든 모든 서비스가 진입하는 최초 진입점인 특성을 활용하면 사용자가 처음 서비스에 접근했을 때 하고 싶은 무언가를 여기에서 처리할 수 있음

import App, { AppContext } from 'next/app';
import type { AppProps } from 'next/app';

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

MyApp.getInitialProps = async (context: AppContext) => {
  const appProps = await App.getInitialProps(context);
  return appProps

}

export default MyApp;

• _app.tsx에 getInitialProps를 추가하려면 반드시 const appProps = await App.getInitialProps(context)를 실행한 뒤 해당 값을 반환해야 함
• 해당 코드는 다른 페이지에 있는 getInitialProps를 실행해서 반환하는 역할을 하는데, 이게 없다면 다른 페이지의 getInitialProps 가 정상적으로 실행되지 않음

4.3.6 next.config.js

• Next.js 실행에 필요한 설정을 추가할 수 있는 파일
• Next.js 실행과 사용자화에 필요한 다양한 설정을 추가할 수 있으므로 어떠한 설정이 가능한지 직접 소스코드를 통해 확인하는 것이 좋음

/** @type {import('next').NextConfig} */
const nextConfig = {
 //설정
};

export default = nextConfig;

💡실무에서 자주 사용되는 설정

• basePath : 애플리케이션을 실행시 호스트 아래에 /에 애플리케이션에 제공되는데, bashpath에 값을 추가하면 모든 경로에 추가됨 ( bashPath : "docs" → localhost:3000/docs )
• swcMinfy : swc(Speedy Web Compiler)를 사용해 코드를 압축을 수행할지 결정함 (기본값: true)
• poweredByHeader : Next.js가 응답헤더에 X-Power-by: Next.js 정보를 제공
• redirects : 특정 주소를 다른 주소로 보내고 싶을 때 사용 (정규식 사용가능)
• reactStrictMode : 리액트에서 제공하는 엄격모드 설정할지 여부 (기본값: true)
• assetPrefix : 만약 next에서 빌드된 결과물을 동일한 호스트가 아닌 다른 CDN 등에 업로드하고자 한다면 이 옵션에 해당 CDN 주소를 명시하면 된다.