TypeScript 기반 Next App 설정
SPACE_DEV_CLUB 프로젝트에서 Front Stack이 위와 같다. 그래서 먼저 간단한 프로젝트를 설계하며 해당 스택들을 사용해보기로 했다.
TypeScript 기반 Next App 생성
yarn global add create-next-app
create-next-app project-name
next 앱을 설치하고 typescript를 추가하려고 했는데 명령어가 동작하지 않았다.
그래서 yarn create next-app --typescript
으로 typescript를 기반의 next앱을 설치했다. 설치가 완료되면 프로젝트 이름을 결정해주면 된다.
package.json을 보면 eslint까지 적용 되어있다.
styled-components 추가
yarn add styled-components @types/styled-components
yarn add -D babel-plugin-styled-components
이제 styled-components도 추가 되었다.
- styled-components 테스트
// H1 생성
const H1 = styled.h1`
color: red;
`;
// return 안에 h1태그 작업
<H1>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</H1>
이제 styled-components를 사용할 수 있다.
Prettier
yarn add --dev --exact prettier
yarn prettier --write .
팀 프로젝트를 진행하므로 프리티어도 설치해주자.
위의 사진처럼 VScode에서 설정들을 해주자.
{
"printWidth": 80,
"singleQuote": false,
"semi": true,
"tabWidth": 2,
"trailingComma": "all"
}
.prettierrc.json 파일에는 위의 코드를 붙여넣자.
이제 yarn dev
해보면 정상적으로 동작하는것을 볼 수 있다.
Author And Source
이 문제에 관하여(TypeScript 기반 Next App 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leehyunho2001/TypeScript-기반-Next-App-설정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)