[Next.js / TypeScript] next js 를 typescript로 시작하기 - 2

https://nextjs.org/docs/basic-features/typescript

Basic Features: TypeScript | Next.js

사실 공홈에 굉장히 잘 나와있지만 귀찮을 미래의 나, 귀찮은 나같은 사람들을 위해 정리

 

You can create a TypeScript project with create-next-app using the --ts, --typescript flag like so:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

나는 npx를 사용해서 설치를 하기루

@lastest를 입력해서 설치하려니 저런 에러가 떴다. sudo를 앞에 붙이면 된다, npm 캐시를 삭제해라 등 많은 말이 있었지만 이 프로젝트에서 이건 별로 안중요하니까

이렇게 그냥 npx create-next-app --ts 로 설치했다!

이렇게 success가 떠줬다면 설치에 성공한 것이다

next는 react와 달리 npm run start가 아니라 npm run dev로 켜야한다.

start는 배포 후 사용자용

터미널에서 안내해준 url에 들어가보면 이렇게 welcome to next.js가 잘 뜨는 걸 볼 수 있다.

그럼 이제 프로젝트를 시작하기 위해 저 친구들을 다 지워줘야 한다.

 

현재 코드

여기서 index.tsx의 내용을 지워준다

globals.css나 home.module.css 이런 것들은 나중에 폰트 적용하고 할 때 쓸거니까 놔두고~

 

현재 index.tsx

이 상태에서 몇가지만 남겨두고 지워줬다.

우선 Head는 title과 favicon을 설정하는 부분을 그대로 놔두고 나중에 변경할거기 때문에 고대로

 

main은 mui쓸거라 필요없을 것 같지만 우선은 남겨뒀다.

footer는 나중에 빈공간인지 헷갈리지 않게 남겨뒀다.

이번 프로젝트에서는 footer를 쓸 일이 없을 것 같긴 하지만...

Nav도 안쓸 것 같지만.....모르겠다.... 생각을 해봐야겠당

 

어쨌든 이렇게 지워주면

이렇게 깔끔하게 타이틀과 파비콘, 푸터만 남게 된다.

이제 프로젝트 디자인을 입힐 시간이 왔다~_~

다음 이 시간에

to be continued....