1. Node.js 프로젝트를 초기화하는 명령어
npm init -y
2. 최신 버전 설치하기
react@latest: React의 최신 버전 설치
react-dom@latest: React와 함께 사용하는 DOM 관련 라이브러리의 최신 버전 설치
next@latest: Next.js의 최신 버전 설치
npm install react@latest next@latest react-dom@latest
3. TypeScript 최신버전 설치하기
npm install --save-dev typescript @types/react @types/node
npx tsc --init
** 한번에 설치하는 방법
npx create-next-app@latest my-app --typescript
** 디렉토리로 이동 안하면 실행 안됨
4. package.json 수정하기
- 스크립트 : dev
- npm run dev 명령어 사용 가능
{ "dependencies": { "next": "^14.2.5", "react": "^18.3.1", "react-dom": "^18.3.1" }, "name": "nextjs", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT", "description": "" }
6. 페이지 만들기
export default function Tomato(){ return <h1>Hello NextJS</h1> }
7. 실행하기
npm run dev
- ctrl + 클릭 → 새창 생성
export const metadata = { title: 'Next.js', description: 'Generated by Next.js', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) }
8. 페이지 추가하기
- 폴더 생성 → URL 생성
- 파일이 없으면 경로의 일부분이기에 에러남
- 폴더 내부에 page.tsx실제 보여지는 페이지
export default function AboutUs(){ return <h1>About Us</h1>; }
- 폴더만 만들어도 URL은 생성이 되나 UI를 만들지 않으면 오류남
9. 잘못된 URL 요청시 화면 만들기
- UI가 없는 페이지, 존재하지 않는 URL 요청시 보이는 화면
export default function NotFound(){ return <h1>Not Found</h1>; }
Share article
