- Next.js 소개
- Next.js with Typescript (현재)
- Next.js with module sass
이 글은 타입스크립트가 뭔지 잘 아시는 분을 대상으로 진행하겠습니다. 혹시 잘 모르신다면 이 글을 참고해주세요.
저는 타입스크립트를 이용해 개발을 합니다. 객체에 대한 이해를 넓혀주고 넓어진 이해가 좋은 디자인 패턴을 짤 수 있도록 도움을 준다고 믿기 때문입니다.
하지만 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 를 추가해줍시다!
- 파일을 생성해주고
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 를 해보면…
Profit! 아주 잘 됩니다.
Conclusion
이렇게 깡통 프로젝트로 Next.js with typescript 프로젝트를 만들어보았습니다. 앞으로는 이걸로 여러가지 제품을 만들어보죠!
References
갓로퍼트, 그가 리액트 생태계를 구원하리니…