https://nomadcoders.co/nextjs-for-beginners/lobby
Next.js 시작하기 – 노마드 코더 Nomad Coders
NextJS for Beginners
nomadcoders.co
위에 나오는 강의에 1. INTRODUCTION의 내용을 간단히, 요약 정리를 한 글이다.
NextJS가 뭐야??
React framework 중에서 가장 유명한 애임!!
-> 먼저 react에 대해서 알아야함!(jsx, state, props, data fetch, routing와 같은 기본 개념을 알아야함)
#routing: 웹 애플리케이션에서 사용자의 요청(URL)에 따라 적절한 페이지나 리소스를 제공하는 과정!
= 사용자가 웹 애플리케이션을탐색할 떄 발생하며 URL을 해석하여 해당 페이지를 찾은 후 이 페이지를 클라이언트에게 제공하기 위해 랜더링을 진행한 후 상태를 유지시킨다
React VS Next.js
React
UI 인터페이스를 build하는데 사용하는 라이브러리(반응형 사용자 인터페이스 구축)
- 라이브러리: 코드내에서 내가 사용하는 것! (내가 필요할 때 필요한 라이브러리를 찾아 코드내에서 사용하려고 설치하는 것)
Next.js
프레임워크가 코드를 찾아서 실행하기 때문에 코드를 올바른 위치에 배치하고, 함수와 변수를 올바른 모양으로 export하면 next.js가 웹사이트를 구축해줌!
- 프레임워크: 우리에게 주도권이 없음! 프레임워크가 알아서 결정과 자동화를 진행 => 단, 우리가 규칙을 지켜야함
Project Setup
- npm init -y
npm:node package manager -> 패키지, 라이브러리 설치,관리,공유할 수 있게 만듦 - package.json 파일에서 'license': ‘MIT’로 바꿈
- npm install react@latest next@latest react-dom@latest (이때 version이 낮을 경우 nvm
Node version manger설치 후 최신 lts 버전 설치하고 npm 최신 버전 설치)
- react: Ui와 다른 모든 것을 구성하는 부분
- react-dom: Document Object Model에 렌더하는 역할(cf: ios나 android기기에 렌더링하는 것과 유사)
4. package.json 파일에서 'script'의 내용을 'dev':'next dev'로 바꿈
- dev 명령어를 실행하면 next js가 실행하게 됨! 이후 nextjs가 우리의 코드를 찾게 될거임
5. app 폴더안에 page.tsx 파일을 만듦!
NextJS가 실행할 때 app폴더 안에 page 파일을 찾아볼거임! 무조건 이 형식대로 써야함!
6. page.tsx에 export default function ~~~()로 만들고 return할 내용을 적은 뒤 명령창에 rpm run dev를 실행시키면 4에서 설정한 next dev가 실행되어 NextJS 서버가 만들어지고 특정 주소에서 실행됨
- 만약 안될 때 는 next.js 패키지가 제대로 설치되지 않았을 수 있기 때문에 다시 설치해봐야함!!
- localhost가 열리지 않을 때는 클라우드 ide에서 제공하는 외부 URL을 사용하여 접근해보자!!(대쉬보드에 나와있음)
- 이렇게 되면 알아서 app/layout.tsx 파일이 생김