frontendreact

Nextjs 에서 typescript 적용하기

next, react, typescript
Views: 413

시작하기

서버사이드렌더링(server side rendering, SSR)를 손쉽게 구현할수 있는 프레임워크입니다.
Typescript를 적용해서 사용해보도록 하겠습니다.

초기설정

두가지 방법으로 설정을 할 수 있습니다.

basic

1
2
3
4
5
mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages

프로젝트를 생성하고 react와 next를 저장해주도록 합니다.
최상단 루트 폴더에서 pages폴더를 만들어 줍니다. 이 폴더의 이름은 변경되서는 안되고 모든 페이지 관련파일은 pages폴더 내부에 들어 있어야 합니다.

Index.js
1
2
3
4
5
6
7
const Index = () => (
  <div>
    <p>Index 페이지 입니다.</p>
  </div>
);

export default Index;

pages 폴더 내부에 index.js파일을 생성합니다.

1
2
3
4
5
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

터미널에서 npm run dev를 하면 서버가 구동됩니다.

create-next-app

create-react-app과 비슷한 사용방법으로 기본틀은 잡혀있습니다.
create-next-app app-name으로 js로 된 기본 프로젝트를 생성 할 수 있습니다.

Typescript 적용하기

typescript 관련 모듈을 설치 해줍니다.
블로그 혹은 깃헙에서 보이는 Next JS 의 공식모듈 @zeit/next-typescript의 경우 사용하지 않아도 됩니다.
@zeit/next-typescript을 사용시 다음과 같은 로그가 나옵니다.

1
@zeit/next-typescript is no longer needed since Next.js has built-in support for TypeScript now. Please remove it from your next.config.js and your .babelrc

쉽게 말해서 Next.js는 현재 TypeScript에 대한 내장 지원이 있으므로 @zeit/next-typescript을 사용할 필요가 없다. 그러니 제거하라는 로그입니다.

1
npm install -D @types/next @types/react @zeit/next-typescript @types/next @types/react typescript @types/node

루트 폴더에서 next.config.js, tsconfig.json 파일들을 생성합니다.

next.config.js
1
module.exports = {}

config 옵션을 설정해 줍니다.

tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

배포하기

이 부분은 필수는 아닙니다
Next.js 프로젝트가 설정되면 now로 앱을 배포해보도록 하겠습니다.
Now CLI를 설치하거나
npm i -g now로 설치를 해줍니다.

next.config.js파일을 수정해줍니다.

next.config.js
1
2
3
4
5
6
module.exports = {
  typescript: {
    ignoreDevErrors: true,
  },
  target: 'serverless',
};

Next.js 빌드 대상을 "serverless"로 설정하여 서버리스 빌드를 활성화합니다.
다음으로, 응용 프로그램의 시작점이 무엇인지, 응용 프로그램을 빌드 및 배포하는 데 사용해야하는 Builder가 무엇인지 지정해주어야 합니다.
루트 폴더에 now.json파일을 생성해줍니다. now 작성방법

1
2
3
4
5
{
  "version": 2,
  "name": "react-next-app",
  "builds": [{ "src": "next.config.js", "use": "@now/next" }]
}

npm run build로 배포를 할 수 있습니다.

prettier 및 eslint 적용하기

prettier와 eslint는 eslint 적용 포스트를 참고해주세요

Share