가수면

React 앱을 Next로 마이그레이션 하기 본문

React/Next.js

React 앱을 Next로 마이그레이션 하기

니비앙 2023. 7. 9. 05:33

Next 설치

1. npm install next@latest react@latest react-dom@latest

2. package.json에 추가

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

3. Next.js 방식의 경로 디렉토리 생성 후 파일 옮기기

4. app/layout.tsx 생성

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

5. Router, index, App 파일 삭제

 

Tailwind CSS가 적용되지 않을 경우

1. reset css 삭제

globals.css에 reset css가 들어있으면 테일윈드가 적용 안 될 수 있음. 

 

2. globals.css의 내용을 아래 코드로 교체

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

 

'React > Next.js' 카테고리의 다른 글

Next 및 React를 EC2로 배포하기 (feat. Docker)  (0) 2024.04.14
Next 12버전과 13버전 다른점 정리  (0) 2023.07.24
Next.js 심화  (0) 2023.06.20
라우팅 심화  (0) 2023.06.12
리액트에서 사용했던 기능들  (0) 2023.06.07
'React/Next.js' Related Articles more
Comments