[Next.js] NextJS란?

프론트엔드/NextJS

[Next.js] NextJS란?

zero2-pooh 2023. 10. 23. 17:25

NextJS란?

- Next.js는 리액트로 만드는 서버사이드 렌더링(SSR) 프레임워크다.

- Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로,

리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다.

⚠️ React에는 한 가지 큰 문제점이 있는데, 바로 리액트는 기본적으로 클라이언트 사이드에서만 작동한다는 점이다!

사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 검색 엔진 최적화(SEO)의 효과를 거의 볼 수 없으며❌,

첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다.

웹, 앱을 완전히 표시하려면~

브라우저가 전체 웹 애플리케이션 번들을 다운로드한 다음 ➡️ 그 내용을 분석하고 코드를 실행해서 결과를 얻어야 한다.

그래서! 아주 큰 웹 애플리케이션에서는 첫 화면을 표시하기까지 수 초가 소요되기도 한다.

🙌🏻 이 문제를 해결하기 위해 많은 개발자들이 웹 애플리케이션을 서버에서 미리 렌더링 해두는 방법을 연구하기 시작했다.

SSR을 사용할 수 있다면?

리액트 앱을 순수한 HTML 페이지로 미리 렌더링 해둔 다음 ➡️ 브라우저가 이를 다운로드하여 즉각 화면에 표시하고,

➡️ 클라이언트에서 자바스크립트 번들을 다 받으면 사용자가 웹 앱과 상호 작용할 수 있게 된다.

❗️이러한 연구의 결과로 Vercel이 Next.js를 만들었다❗️

SSR을 함으로 얻는 이득?

로딩 - 클라이언트 사이드 렌더링(CSR)의 경우 모든 JS 파일을 로드하고 사용자는 웹을 보게되고,
이때까지 사용자는 많은 시간을 대기해야 하는데,
👉🏻 SSR은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 된다.
SEO - 클라이언트 사이드 렌더링(CSR)의 경우 자바스크립트가 로드되지 않은 경우 아무런 정보를 보이지 않는다❌
구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로
결론적으로 검색에 아무 페이지도 걸리지 않게 되는데,
👉🏻 SSR은 검색엔진이 자바스크립트를 읽는 것이 아닌 서버 측에서 자바스크립트, html, css를 만들어
콘텐츠에 직접 업로드 함으로 검색엔진에 게시글이 걸리게 된다.
또한, meta 태그를 자유롭게 추가함으로 SEO를 용이하게 할 수 있다.

Next.js가 제공하는 주요 기능

hot reloading

- 개발 중 저장되는 코드는 자동으로 새로고침 된다.

automatic routing

- pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다. (pages/page1.tsx -> localhost:3000/page1)

- public 폴더도 pages의 폴더와 동일하게 라우팅 할 수 있다. 그러나 모든 사람이 페이지에 접근할 수 있으므로 지양하도록 한다

single file components

- style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.

<style jsx global>를 사용하면 글로벌로 스타일 정의 가능하다.

// styled-jsx

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

글로벌 스타일 정의 가능

_app.tsx에만 정의 가능하다. 다른 컴포넌트에 정의한 경우 다른 클래스와 겹쳐 오류를 발생할 수 있음으로 _app에서만 허용한다.

다른 컴포넌트에 정의 시 아래와 같은 오류를 낸다.

Global CSS cannot be imported from files other than your Custom <App>. Please move 
all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level 
CSS (CSS Modules).

// _app.tsx
import "./globals.css";
 
function MyApp({ Component, pageProps }) {
  return <Component ponent {...pageProps} />;
}
 
export default MyApp;

server landing

- 서버렌더링을 한다. 클라이언트 렌더링과 다르게 서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있다.

code splitting

- dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능하다.

- 코드 스플리팅은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것이다.

- 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있다.

typescript

- 타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요가 없다.

- 타입스크립트를 설치하고 (yarn add typescript @types/node @types/react) 명령어 (yarn run dev)만 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 타입스크립트로 코딩이 가능해진다.

sass 사용하기

- 따로 config 파일을 정의하지 않고 이 css 파일을 scss로 바꾸고 yarn add sass --dev를 해주면 next에서 알아서 설정을 해준다.

Next 사용의 단점?

프레임워크의 공개빌드된 파일들의 폴더가 .next라서 next.js 사용 프로젝트인 게 잘 드러난다.
속도 SSR의 단점으로 서버가 느리면 웹사이트가 기하급수적으로 느려진다.
서버 부하가 CSR에 비해 많은 편이다.
페이지 이동할 때마다 새로운 html 파일을 불러올 때 화면이 깜박거린다. (UX적으로 좋지 못함)

⚠️ NextJS 13인 최신버전은 다르게 바뀌었는데 다음 포스팅에서 어떤점이 바뀌었는지 포스팅 해보려고 한다.
즉, 이 내용들은 최신버전 개념이 아니라는 말❗️

참고

https://subtlething.tistory.com/115

https://kyounghwan01.github.io/blog/React/next/basic/#import-style-component