Next.js with Typescript

1. Next.js 소개
2. Next.js with Typescript (현재)
3. Next.js with module sass

이 글은 타입스크립트가 뭔지 잘 아시는 분을 대상으로 진행하겠습니다. 혹시 잘 모르신다면 이 글을 참고해주세요.

1.0 들어가며 - ts-for-jsdev

저는 타입스크립트를 이용해 개발을 합니다. 객체에 대한 이해를 넓혀주고 넓어진 이해가 좋은 디자인 패턴을 짤 수 있도록 도움을 준다고 믿기 때문입니다.

하지만 Next.js의 기본 세팅은 이름에서부터 알 수 있듯이 자바스크립트입니다. 이제 저는 Next.js를 Next.ts(?)로 바꿔볼 것입니다.

1. Next.js 프로젝트를 만들자

먼저 nextjs-typescript라는 폴더를 만들어 VS Code를 실행시키겠습니다.

여기에 이제 next.js를 설치하겠습니다.

git init
yarn init -y
yarn add react react-dom next
mkdir pages

package.json을 간단하게 수정하죠.

{
...skip
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
skip...

수많은 node_modules 파일들이 git으로 한번에 추적하기에 너무 많다며 칭얼댈 거에요.

.gitignore 를 추가해줍시다!

1. 파일을 생성해주고

touch .gitignore

2. 해당 내용을 적어줍시다

# Created by https://www.gitignore.io/api/node
# Edit at https://www.gitignore.io/?templates=node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next

# End of https://www.gitignore.io/api/node

https://www.gitignore.io/api/node 를 기반으로 약간 수정했습니다.

3. 마지막으로 리프레시를 해주면…

Fin. 짜잔~ 추적 파일이 확 줄었습니다

2. 타입스크립트 추가

터미널에 간단하게 한 줄 적죠.

yarn add @types/next @types/react @types/react-dom @zeit/next-typescript typescript --dev

next.config.js 파일을 만들고…

touch next.config.js

next.config.js 작성!

const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript();

pages/index.tsx 파일을 추가하고

touch pages/index.tsx

내용을 넣읍시다

const Index = () => <h1>타입스크립트와 함께하는 Next.js</h1>;
export default Index;

마지막으로 yarn dev 를 해보면…

yarn dev 결과

Profit! 아주 잘 됩니다.

Conclusion

이렇게 깡통 프로젝트로 Next.js with typescript 프로젝트를 만들어보았습니다. 앞으로는 이걸로 여러가지 제품을 만들어보죠!

References

[Next.js 2.0] 간단한 React 전용 서버사이드 프레임워크, 기초부터 본격적으로 파보기

갓로퍼트, 그가 리액트 생태계를 구원하리니…