next.js 서버사이드 렌더링을 위한 React Framework

Last Modified : 2020-06-22 / Created : 2020-06-05

3,926
View Count

주소 복사하기

자바스크립트 프레임워크 next.js에 대하여 알아봅니다.

! next.js는?

next.js는 매우 잘 알려진 프레임워크입니다. next.js를 사용하는 큰 이유 중 하나로 React를 사용한 프론트엔드 프레임워크이면서 서버사이드 랜더링이 가능하다는 점입니다.

대시보드를 가지는 어드민, 관리자 페이지의 경우 서버사이드 렌더링이 꼭 필요한 것은 아니나 일반적인 홈페이지의 경우 SEO, 검색엔진 최적화를 위해서 서버사이드 렌더링 방식을 사용합니다. 이 경우 서버 코드를 직접 html 템플릿에 입력하는 방식은 하나의 언어만 사용하는 것보다 어렵고 비효율적일 수 있죠. 이런 문제를 해결할 수 있는 대안 중 하나가 바로 next.js와 같은 작고 기능에 충실한 프레임워크를 사용하는 방법입니다.

# next.js 단순하고 쉬운 React 프레임워크

그럼 next.js에 대하여 좀 더 알아봅니다. 먼저 어떤 기능과 장점을 가지고 있을까요? 일단 여러가지 파일 포맷을 지원합니다. 문서 템플릿으로 아래와 같은 확장자를 모두 지원합니다.

.ts .tsx .js .jsx 모두 가능

특히 타입스크립트(Typescript) 역시 next.js에서 지원합니다. 요즘은 대부분의 프레임워크에서 기본으로 타입스크립트를 지원하고 있죠.(타입스크립트 설치는 아래에 있습니다.)

또한 페이지 라우팅 역시 쉽게 구현할 수 있습니다. 라우팅의 경우 /pages/라는 폴더를 만들고 내부에 파일을 생성하면 자동으로 파일 이름을 가지는 라우팅 경로가 생성되게됩니다.

Ex) /simple-page/ url 주소 연결하기
/pages/simple-page.jsx 처럼 파일을 추가하면 라우팅 연결됨

이처럼 간단하게 라우팅 설정이 가능합니다.

React 기반의 next.js
서버사이드 렌더링
간단한 설정과 사용
타입스크립트 등 js, jsx, ts, tsx 사용 가능

그 외에도 자바스크립트 기반의 언어로 서버 사용이 가능하다는 점... 그리고 react 언어에 익숙한 경우 쉽게 사용할 수 있다는 점이 있습니다. 추가로 기타 필요로 한 설정 등이 없거나 매우 쉽게 사용할 수 있다는 점이 강점입니다. 그럼 아래는 next.js의 설치 및 사용 방법을 알아봅니다.

! next.js 시작 및 설치하기

먼저 next.js를 시작하기 위해서는 node 및 npm 설치가 필요합니다. 만약 없는 경우 apt-get등으로 우선 설치해야합니다.

node, npm 설치시 가급적 apt-get 등 업데이트 후 설치하는 것이 좋습니다.

apt-get update
apt-get upgrade

sudo apt-get install -y nodejs

설치가 되었다면 이제 next.js를 설치하도록 하겠습니다. 먼저 package.json을 생성 후 설치하도록 하겠습니다.

npm init -y
npm install next react react-dom

이제 next 관련 패키지가 모두 설치되었습니다.

! typescript 사용하기

만약 타입스크립트를 사용하기 위해서는 아래와 같이 추가적인 패키지 설치가 필요합니다.

npm install --save-dev typescript @types/react @types/node

이제 루트 경로에 tsconfig.json 파일을 생성한 후 next dev를 실행하게 되면 자동으로 tsconfig.json의 기본값이 저장되게 됩니다.

touch tsconfig.json

타입스크립트의 설정을 변경할 경우 tsconfig.json의 값을 변경하도록 합니다.

! Pre-processor SASS/SCSS 사용하는 방법

next.js에서 전처리 css을 사용하는 방법은 매우 간단합니다. custom 설정이 필요하지 않다면 단순하게 모듈 설치만으로 가능한데요 아래처럼 sass을 설치하면 됩니다.

npm install sass

이제 .sass .scss를 사용할 수 있게되었습니다. 여기서 잠깐 !!
next.js는 여러개의 scss 파일을 생성해 추가할 경우 아래와 같이 에러가 나타날 수 있습니다.

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.

즉 전역 css의 선언은 반드시 _app.js를 사용하라는 의미입니다. 만약 _app.js 파일이 없다면 만들어 사용하면 됩니다.

import '../public/styles/app.scss';

function myApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default myApp;

위 코드는scss 파일을 public 내부의 styles 폴더를 만들어 app.scss라는 파일을 추가하고 이를 import 하여 사용한 방법입니다.

! 그 외 외부 라이브러리 및 내부 파일 추가하는 방법, css, js 등등

그 외에 필요한 별도의 라이브러리 및 내부 js, css 등을 추가하기 위해서 어떻게 할까요? 이 경우 페이지 소스에 아래처럼 /public/ 경로를 사용하여 추가할 수 있습니다. 외부 폰트 나눔고딕과 /public/ 아래에 있는 /libs/underscore.min.js 파일을 추가해보도록 하겠습니다.

export default () => {
return (
<>
Hello World

<script src="/libs/underscore.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
</style>
</>
)
}

추가 완료 하였습니다.