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