Next.js 초기세팅

next.js 프로젝트 시작하기

 

npx create-next-app@latest

yarn create next-app

pnpm create next-app

bunx create-next-app

 

 

원하는 조건에 맞춰서 세팅할 수 있습니다

What is your project named?  my-app
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

• What is your project named?  my-app =>프로젝트 폴더명 설정
• Would you like to use TypeScript? No / Yes =>타입스크립트 사용 여부
• Would you like to use ESLint? No / Yes =>eslint사용 여부
• Would you like to use Tailwind CSS? No / Yes =>tailwind CSS사용 여부
• Would you like to use `src/` directory? No / Yes=>src디렉토리 사용 여부
• Would you like to use App Router? (recommended) No / Yes=>app라우터 사용여부
• Would you like to customize the default import alias (@/*)? No / Yes=>절대경로로 사용여부

초기에 세팅해야할 다양한 항목들을 next.js설치 시 필요에 따라 미리 설정해줍니다.

 

추가 설정 항목 (tailwind 관련)

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    ]
   //생략
  }

 

위의 항목을 src를 사용하므로 다음과 같이 바꾸어줍니다.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  // 생략
  }

 

 

global.css

기존 코드

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

 

아래와 같이 import구문으로 변경해줍니다 

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";