next.js 프로젝트 초기설정하기

SEO 와 code-splitting 은 next.js 라이브러리를 이용해 쉽게 react에 적용시킬 수있습니다. 저는 state 관리를 위해 Mobx를 공부하고 또 제 개인 프로젝트에 적용해보고 있는데요, 앞서 말한 모듈들을 사용하기 위해 여러 시행착오를 경험했고 검색을 통해 기본적인 프로젝트 구조를 잡을 수 있었습니다. 지금 쓰는 글과 같이 제 지난 발걸음들을 기록해 둔다면 누군가에게는 도움을, 미래의 저에게는 하나의 cheet-sheet가 될 수 있을 것입니다!

본 글에서는 다음을 다룹니다.
#Mobx #절대경로 #absolute-path #decorator사용하는법 #package.json

👉 nextjs 프로젝트 생성하기

next.js 는 SSR 을 사용할 수 있게 해주는 모듈입니다. React.js에 SSR을 이용해 SEO(Search Engine Optimization)을 적용할 수 있게 해주며 SEO가 적용된 프로덕트는 구글과 같은 사용자가 많이 사용하는 검색 사이트에 한 눈에 알아보기 좋은 미리보기와 같은 정보를 전달해줄 수 있습니다. 서버에서 html 기본 골격을 렌더링해서 브라우저로 보내주기 때문이지요.

터미널에서 아래의 명령어를 사용하여 쉽게 next.js 프로젝트를 생성할 수 있습니다.

create-next-app myBeautifulApp

~/Desktop 밑에서 프로젝트를 생성한다고 가정한다면
~/Desktop/myBeautifulApp 디렉토리 안에 생성된 next.js 파일들을 확인할 수 있습니다.

👉 package.json에서 scripts 명령어 사용하기

~/Desktop/myBeautifulApp/ 의 package.json 파일을 확인해볼까요?

package.json에는 프로젝트에서 사용할 모듈에 대한 정보와 함께 서버실행을 위한 명령어를 설정할 수 있습니다.

이 중 scripts 에 해당하는 내용을 수정해볼까요?

...

"scripts": {
    "dev": "next dev -p 8001",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build"
  },

...

scripts 안의 dev 명령어는 개발환경에서 사용하는 명령어입니다. -p 8001을 붙여 특정 포트넘버에서 서버를 실행하게 만들 수 있습니다.

👉 .babelrc 파일 생성하여 decorator 사용가능하게 설정해주기, 부제.. tsconfig.json

.babelrc는 프로젝트 build할 때의 적용사항을 설정해주는 것이며
tsconfig.json은 typescript 사용 시 컴파일 에러가 뜨지 않게 설정을 해주는 것입니다.

먼저 .babelrc를 보기전에 다음의 dependency를 설치해주세요.

yarn add @babel/plugin-proposal-decorators

이제 .babelrc 파일을 만들고 아래처럼 설정해주시면 됩니다.

{
	"presets": ["next/babel"],
	"plugins": [
		["@babel/plugin-proposal-decorators", {
			"legacy" : true 
		}]
	]
}

간단하죠?
.tsconfig.json 파일의 "compilerOptions" 부분을 살펴봐주세요.

"compilerOptions": {
  ...
  "experimentalDecorators" : true
  ...
 }
 ...

👉 next.config.js 설정해서 절대경로 사용해보기

create-next-app을 통해 프로젝트를 생성하셨다면 기본적으로 webpack 모듈이 설치되어 있을 것입니다.
아래와 같이 작성해볼까요?

const widthBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
const nextEnv = require('next-env'); 
const dotenvLoad = require('dotenv-load');
const webpack = require('webpack');

dotenvLoad();

const withNextEnv = nextEnv();

module.exports = { 
	webpack(config ,{ isServer, buildId} ) {
		config.resolve.modules.push(__dirname)

		return config;  
	}
}

위에서 중요하게 볼 부분은 바로 module.exports 입니다.
webpack함수를 이용하여 __dirname을 설정해주는 것을 알 수 있습니다.

이제 마지막입니다.
마지막으로 tsconfig.json을 수정하겠습니다.

...
"compilerOptions": {
  ...
  "baseUrl": ".",
  "rootDir": ".",
    ...
}
...

이렇게 설정을 해준다면 VSCode 와 같은 IDE환경에서 절대경로를 사용해도 컴파일 에러를 띄우지 않을 것입니다.