민프
[Next.js][기초] 1. NextJS 설치 (수동) 본문
이번 포스팅에서는 next.js를 수동으로 설치해보는 내용에 대해서 다뤄보겠습니다.
1. 디렉토리를 하나 만듭니다.
2. Vscode를 실행시키고 'npm init -y'를 실행
위 명령어를 실행시키면 아래와 같은 정보들을 가진 package.json이 생성될겁니다
3. 'npm install react@latest next@latest react-dom@latest'를 입력하여 최신버전을 설치해줍니다.
여기에서 react는 UI와 다른 모든 것들을 구성하는 부분이고,
react-dom은 react에서 UI를 구성한 것들을 브라우저의 DOM(Document Object Model)에 렌더하는 역할을 합니다
4. package.json에서 scripts의 내용을 아래와 같이 수정해줍니다 (스크립트 내용은 자유롭게)
위 와 같이 입력하면 이제 이 dev명령어를 실행하면 Next JS가 실행되게 되고,
그 뒤엔 NextJS가 우리의 코드를 찾게 됩니다
이렇게 동작하는 이유는 NextJS는 사용자가 프레임워크를 호출하는 것이 아닌 프레임워크가 코드를 호출하는 프레임워크이기 때문이죠
5. app/page.tsx 생성 (중요)
NextJS가 실행될 때 첫번째 페이지를 app폴더 안에 있는 page라는 폴더에서 찾으려고 하기 때문에 app/page.tsx or app/page.jsx 를 만들어놔야합니다
page.jsx에 아래와 같이 앞으로 실행 될 코드 몇줄을 입력해놓고 저장을 눌러주세요
export default function Apple(){
return <h1>Hello NextJS</h1>
}
6. 'npm run dev' 커맨드 실행
만약 여기에서 TypeScript가 설치되어있지 않다면 아래 커맨드를 입력 시 자동으로 설치를 해줍니다
이렇게 되는 이유가 프레임워크를 시작하는 순간 프로젝트에서 TypeScript를 필요로 하는것을 인식하고 그 뒤 TypeScript 설정을 자동으로 설치를 해주게 되는 겁니다
또한 위 명령어 실행으로 localhost:3000이라는 NextJS 서버가 생성된 것과 오른쪽 사진과 같이 잘 동작하고 있는 것을 확인하실 수 있습니다
보시면 지금 reactJS 조차 import하지 않았는데 그냥 동작한 것을 확인하실 수 있는데요
페이지를 이동할 때 아래 사진과 같이 Console에 찍힌 내용을 보시면
app/layout.tsx가 자동으로 생성된 것을 확인하실 수 있습니다
그럼 layout.tsx에는 어떤 내용이 있는지 살펴보겠습니다
layout.tsx
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>
)
}
