[노마드코더] Next.js 시작하기 Introduction

 

https://nomadcoders.co/nextjs-for-beginners

NextJS 14 시작하기 – 노마드 코더 Nomad Coders

 

React는 라이브러리, Next는 프레임워크.

라이브러리는 코드 내에서 사용하려고 설치하는 것이며 사용의 주체는 개발자이다. 라이브러리는 아무 결정도 해주지 않는다. 어떤 폴더, 파일, 구조에서 사용할지 개발자가 결정.

프레임워크를 사용하면 많은 일을 대신해준다. 개발자에게 통제권이 없다. Next.js의 규칙을 따라야 한다. 올바른 위치에 폴더와 파일이 있어야 한다. Next.js가 우리의 코드를 찾아서 실행한다. 

 

https://nextjs.org/

Next.js by Vercel - The React Framework

 

 

수동 설치

mkdir learn-nextjs14
cd learn-nextjs14
code .

 

원하는 디렉토리에서 cmd 실행 후 명령어 실행

 

 

npm init -y

 

vscode가 뜨면, 터미널 탭에서 명령어를 실행하면 package.json이 자동생성된다. 

 

license 를 MIT로 변경해준다. 기능적으로 거의 차이는 없다고 한다. 

 

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

 

다 최신버전으로 install 해준다. React-dom은 React 애플리케이션을 브라우저의 DOM에 렌더링 하는 역할을 담당한다. 

 

"scripts": {
    "dev": "next dev"
  },

 

dev 명령어를 실행하면 Next JS이 실행되게끔 수정.

 

그리고 app/page.tsx 파일을 만들어준다. (jsx으로 해도 된다)

Next JS는 실행할 때 app 폴더 안의 page라는 파일을 찾아 본다.

 

 

page.tsx

export default function Tomato() {
  return <h1>Hello NextJs!</h1>;
}

 

npm run dev 해주면,

 

내 Node.js 버전이 16.15.1 이라서 안 된단다. 16버전이랑 18버전 번갈아 쓰고 있었어서, nvw use 18로 변경 해주었다. 

 

 

 

typescript가 없다며 설치해주는 넥스트햄,, 매우 친절

 

 

요렇게 띄워졌습니다~~!

layout.tsx도 생겼다.