nextjs 14 초기 셋팅

by

2023년 말 시점으로는 이 방법이 14설치 방법이지만 시간이 지나면 다른 버전이 설치 될 수 있습니다. nvm 으로 node 버전 관리하고 있는데 요즘에는 node 20이 최신 LTS 버전이라고 해서 일단 nvm use v20으로 셋팅하고 진행했습니다.

nvm use v20

npx 명령어를 이용해서 구성합니다.

npx create-next-app@latest trello-app

명령어 실행하고 나면 이것저것 물어보는데요. 대부분 기본값으로 하고 src 디렉토리 부분과 import alias 부분만 No로 합니다.

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

trello-app 이라는 폴더가 생겨요. 그 폴더 안으로 들어가서 shadcn 부분 초기화합니다.

cd trello-app
npx shadcn-ui@latest init

설정하는 부분 선택합니다.

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Neutral
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.ts
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

style은 Default, base color은 Neutral로 선택하고 나머지는 대부분 기본값으로 합니다. tailwind 설정하는 부분에서 js가 아니라 ts로 설정(tailwind.config.ts)합니다. tab 키를 누르고 ts로 변경합니다.

이제 code . 명령어로 visual studio code 열어서 작업해봅시다. code 열어서 작업할때도 node 버전 잘 확인하면서 아니면 nvm use v20 으로 버전 변경하고 해야 합니다.

/app/page.tsx 파일을 간단하게 수정해서 변하는 부분을 확인해보세요.

export default function Home() {
  return (
    <div>
      Hello Node
    </div>
  )
}

npm run dev 명령어로 서버를 실행해서 http://localhost:3000 으로 접속해볼 수 있습니다.

마지막으로 h-full 했을때 화면 전체 영역을 사용하도록 globals.css 부분에 추가합니다.

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

html,
body,
:root {
  height: 100%;
}

Leave a Comment