Next.js 기초!!!

Next.js 란?

React의 SSR(Server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크 입니다.

리액트로 개발시 검색엔진 최적화(SEO)에 굉장히 좋지 않습니다.

CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털검색에 거의 노출 될 일이 없습니다.

하지만 Next.js 에서는 Pre-rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됩니다.

SSR vs CSR

---

Next.js와 비슷한 프레임워크

npm trands

Gatsby

JAM Stack을 활용한 정적 사이트 생성기입니다.

Next.js 대신 사용할 수 있는 유명한 프레임워크 입니다. Next.js 와 달리 Gatsby는 정적 사이트 생성만 지원하는데, 그 때문인지 정말 놀랍도록 잘 만들어냅니다.

Next.js는 정적 사이트 생성의 기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크입니다. 즉, 서버와 통신을 하며 요청을 받을 때마다 동적으로 웹 사이트를 생성합니다.

또한 Gatsby는 기본적으로 GraphQL을 사용해서 데이터 소스에서 데이터를 가져옵니다.

하지만 Gatsby는 서버 없이, 오로지 정적 사이트 생성을 위해 사용하는 프레임워크입니다.

Razzle

서버 사이드 렌더링이 가능한 자바스크립트 애플리케이션 입니다.

핵심은 create-react-app 도구를 쉽게 사용하면서도 서버와 클라이언트의 복잡한 애플리케이션 설정들을 추상화하고 단순하게 만들 수 있다는 점입니다.

리액트, 뷰, 앵귤러, 스벨트 등 어떤 프레임워크든 원하는 것을 쓸 수 있습니다. → example

Angular Universal

앵귤러는 서버에서 자바스크립트 코드를 실행하고 렌더링하는 기능을 제공하고자 세상에 선보였습니다. Nuxt 나 Next 와 다른 점은 가장 큰 소프트웨어 회사인 구글에서 만들었다는 점입니다.

Nuxt.js

vue에서 사용하는 대표적인 SSR 프레임워크인 Nuxt.js 가 존재합니다.

Nuxt.js는 React의 Next.js에서 영감을 받아 진행된 프로젝트입니다. Next.js 와 마찬가지로 파일을 생성하는 것만으로 라우팅을 자동으로 생성해줍니다.

webpack을 통한 빌드 시스템이 이미 구현되어 있습니다. 그저 npm run만 해주면 됩니다.

 

Nuxt.js                                                                                  Next.js

Nuxt.js                                                                           Next.js

 

---

왜 Next.js일까?🤔

Next.js 는 믿기 힘들 정도로 뛰어난 기능들 때문입니다.

리액트에서 제공하지 않는 여러 기능을 지원하며 비단 컴포넌트뿐만 아니라 설정이나 개발 옵션 등 다양한 부분에서도 유용한 기능들을 제공합니다.

1년 주기로 Next.js 는 버전 릴리스를 하고 있으며 활동적인 커뮤니티를 가지고 있으며 커뮤니티에서 열렬한 지지도 받고 있습니다.

커뮤니티가 활발하다는 것은 코드에 문제가 생겼을 때 Github 이나 스택오버플로우 같은 커뮤니티에서 도움을 받을 수 있기 때문입니다.

Vercel 에서도 이런 요청이나 토의에 적극 참여하고 있습니다.

---

리액트에서 Next.js 로❗

리액트를 사용해본 경험이 있다면 **Next.js** 로 웹 사이트를 만드는 것은 어렵지 않습니다.

Next.js의 기본 철학은 리액트와 거의 같습니다.
‘설정보다 관습’ 이라는 취지로 만들어졌기 때문에 **Next.js**의 특정 기능을 사용하고자 한다면 복잡한 설정 없이도 해당 기능을 사용할 수 있는 쉬운 방법을 찾을 수 있습니다.

예시로 별도의 설정 파일 없이 어떤 페이지에서는 SSR을 적용하고 어떤 페이지에서는 정적 페이지 생성을 적용할 지 지정할 수 있습니다.

각 페이지에서 특정 함수만 export 한다면 Next.js가 알아서 처리해줍니다.

정적 페이지 생성

서버 사이드 렌더링

 

리액트와 Next.js 의 가장 큰 차이점은 리액트는 라이브러리, Next.js 는 프레임워크 라는 것입니다.

Next.js 는 클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공하여 웹 애플리케이션을 만들 수 있게 해줍니다.

서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js 에서 실행되기 때문에 window, document 와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근 할 수 없습니다!!

반면 fs, child_process 와 같이 Node.js 에서만 실행할 수 있는 라이브러리나 API를 사용하려는 경우, next.js 는 각 요청별 데이터를 클라이언트로 보내기 전에 서버 사이드 코드를 실행하거나 페이지 생성 시점에 해당 코드를 처리하는 방식을 지원합니다.

어떤 방식으로 지원하는지는 각 페이지가 어떤 렌더링 방식을 사용하느냐에 따라 결정됩니다.

 

---

Next.js 시작하기

Next.js 는 시작하기 정말 쉽습니다. Node.js 와 npm or yarn 만 설치하시면 됩니다.

또한 vercel 팀에서 제공하는 아주 강력하고 직관적인 도구인 create-next-app 이 기본적인 Next.js 앱을 시작할 수 있는 코드를 생성해 줍니다.

 

npx create-next-app <app-name> or yarn create next-app

이렇게 생성하면 의존성 패키지들이 설치되고 몇 개의 기본 페이지가 생성됩니다.

 

그럼 npm run dev 를 하면 개발 서버가 실행이 되며 3000번 포트로 접근해서 웹 페이지를 볼 수 있습니다.

 

yarn 패키지가 설치 되어 있는 경우 Next.js 는 yarn 패키지 관리자를 사용해서 프로젝트를 초기화 합니다. 이 경우에도 npm을 기본으로 사용하고 싶다면 다음 명령으로 설정을 덮어쓸 수 있습니다.

yarn create next-app --use-npm

 

Next.js 저장소에는 example 디렉터리가 있는데 이곳에는 다양한 기술이 사용된 훌륭한 예제 코드가 있습니다. 만약 Next.js 앱을 도커 환경에서 실행하는 모법 답안 예시를 보고 싶다면 다음과 같이 —example 옵션으로 어떤 보일러플레이트 코드를 사용할 것인지 입력하면 됩니다.

 

npx create-next-app <app-name> --example with-docker link

기본 코드가 생성되고 나면 다음과 같은 구조의 my-app 디렉터리가 만들어 집니다.

pages/ 디렉터리는 내비게이션을 담당합니다.
디렉터리 안의 모든 js파일은 퍼블릭 페이지가 되어 접근 가능합니다.

 

React는 라우팅을 할 때 react-router를 사용하지만 Next.js 에서는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있습니다.

 

파일이 페이지 디렉터리에 추가되면 자동으로 경로 사용할 수 있습니다.

페이지 디렉터리 내의 파일은 가장 일반적인 패턴을 정의하는 데 사용할 수 있습니다.

ex)

pages/index.js -> /

pages/blog/index.js -> /blog

pages/blog/first-post.js -> /blog/first-post

pages/dashboard/settings/username.js -> /dashboard/settings/username

pages/blog/[slug].js -> blog/:slug/ (/blog/hello-world)

pages/[username]/settings.js -> /:username/settings (/foo/settings)

pages/post/[...all].js -> /post/* (/post/2020/id/title)

아래와 같이 디렉터리를 정의하면 /posts/:id ex) /posts/1 , /posts/2 , /posts/3

 

public/ 디렉터리에는 웹 사이트의 모든 퍼블릭 페이지와 정적 콘텐츠가 있습니다.
이를테면 이미지 파일, 컴파일된 css 스타일 시트, 컴파일된 js 파일, 폰트 등이 있습니다.

styles/ 디렉터리도 기본으로 생성되지만 꼭 필요한 것은 아닙니다.
css 코드를 담고 있는 디렉터리 입니다.

반드시 용도가 정해져 있는 디렉터리는 public/ 과 pages/ 뿐이며, 나머지 디렉터리는 필요에 따라 만들 수 있습니다.

 

---

타입스크립트 지원

Next.js는 타입스크립트로 작성된 프레임워크라서 태생적으로 고품질의 타입 정의를 지원합니다. 개발자들에게 훨씬 더 좋은 개발 환경을 제공하는 것입니다.

npx create-next-app <my-app> 으로 설치를 진행할 시에 TypeScript 를 이용할 것인지 물어봅니다.

Yes 를 선택한다면 tsconfig.json 이 생성되며 아래와 같은 설정값이 들어갑니다.

Next.js 가 바벨의 @babel/plugin-transform-typescript를 사용해서 설정 파일을 관리하기 때문에 다음 주의사항을 숙지해야 합니다.

→ Next.js 는 이제 SWC 라는 트랜스컴파일러를 ****사용합니다. 바벨보다 3~5배 빠르답니다.
기존의 babel 구성을 가지고 있는 경우 SWC 가 아닌 babel을 계속 사용할 수 있습니다.

 

트랜스컴파일러 : 최신 JS 코드를 하위 호환성을 보장하는 스크립트 코드로 변환하는 일을 합니다.

SWC : Rust로 짜여진 컴파일러로 JS/TS 트랜스파일링을 주로 담당하고 있습니다.

 

마크다운을 html로 변환해주는 간단한 플젝을 빌드 시킨 결과 ->

SWC 트랜스컴파일러 결과👉

 

 

next/babel 트랜스컴파일러 결과 👉

---

웹팩

웹팩 ? → 특정 라이브러리, 페이지, 기능에 대해 컴파일된 코드를 전부 포함하는 번들을 만들어 줍니다.

ex) 서로 다른 라이브러리에서 각각 한 개씩 세 개의 컴포넌트를 불러오는 페이지를 만들었다면 웹팩은 이들을 클라이언트가 받아서 실행할 수 있는 하나의 번들로 합쳐줍니다.

 

웹팩은 JS 파일, CSS, SVG 등 웹에서 사용하는 모든 자원에 대한 각기 다른 컴파일, 번들, 최소화 작업을 조율하고 처리해주는 일종의 인프라 라고 볼 수 있습니다.

 

SASS *나 LESS 같은 *CSS 전처리기 를 사용해서 애플리케이션의 스타일을 만들고 싶다면 웹팩 설정을 수정해서 SASS 나 LESS 파일들을 분석 및 처리하여 CSS 파일들을 만들도록 해야 합니다.

이 과정은 바벨을 트랜스파일러로 사용해서 자바스크립트 코드로 변환하는 것과 비슷합니다.

CSS 전처리는 나중에 학습할 것 이므로 우선은 Next.js 에서 기본 웹팩 설정을 자유롭게 바꿀 수 있다는 점만 기억하면 됩니다!!

아래는 SASS 컴파일하기 위한 next.config.js 파일입니다.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

위와 같이 Next.js 에서는 많은 옵션이 존재합니다.

Webpack 팀이 Vercel에 합류하면서 개발 중인 Turbopack 번들러로 적극적인 전환 중이며 현재 베타 단계로 이용 가능하다고 합니다.

---

학습한 내용

• 여기까지 Next.js와 리액트 앱의 차이점을 살펴봤으며
• next.js와 다른 유명한 프레임워크의 장단점을 봤습니다.
• javascript 대신 TypeScript 로 개발을 진행할 수 있는 것을 배웠습니다
• next.js 가 트랜스컴파일을 바벨 대신 SWC를 택한 것
• next.config.js 를 수정할 수 있는 것에 대해 배웠습니다.