[next-js] 프로젝트 셋업 (with typescript & tailwindcss)

powershell에서 원하는 dir로 이동 후, 

 

npx create-next-app@latest --typescript

 

설치 중간에 프로젝트 명 입력.

vs code 로 프로젝트 열기

 

code 프로젝트명

 

README.md 수정

index 내용 다 날리기

 

다음, vs code terminal에서 tailwind 설치

npm install -D tailwindcss postcss autoprefixer

 

다음 tailwindcss setup

npx tailwindcss init -p

postcss.config, tailwind.config 파일이 생성된 것을 확인

 

tailwind.config.js로 가서 코드 내용을 다음과 같이 수정

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

content에는 tailwind가 classname을 보고 css를 붙여줄 대상 파일 위치를 추가함

"./pages/**/*.{js,jsx,ts,tsx}"의 뜻은 pages 라는 폴더내 모든 directory(**)의 모든 파일(*) 중 확장자명 js, jsx, ts, tsx인 파일을 대상으로 tailwind를 적용한다는 뜻

 

다음으로 globals.css를 수정, globals.css는 _app.tsx에서 import할 경우 모든 page를 대상으로 적용하는 css임. tailwind를 사용하는 경우에는 이 내용을 전부 지우고 다음과 같이 수정.

 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

index.tsx 내용을 다음과 같이 바꾸고, 배경과 글자색이 빨강, 파랑으로 나타나는지 확인

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div className="bg-red-500">
      <h1 className="text-blue-500"> Hello </h1>
    </div>
  );
};

export default Home;

 

git repository를 생성, url을 복사해서 terminal에서 code랑 연결시켜줌.

git remote add origin [url]

 

 

끝!

 

참고: https://nomadcoders.co/carrot-market/

[풀스택] 캐럿마켓 클론코딩 – 노마드 코더 Nomad Coders

강의 3.0, 3.1