Next.js란?

📍 Next.js란?

기존의 Client Side Rendering 방식인 React의 느린 초기 로딩 속도, 검색엔진 최적화 불리 등의 단점을 보완한, 리액트 기반의 Server Side Rendering 프레임워크이다.

📍 개발 환경 세팅

node.js 설치 (18버전 이상)
vscode 터미널에 입력 npx create-next-app@latest
중간중간에 Y 누르고, 프로젝트명 입력하고, 추가 설정 알아서 하면 Succes!!

실행은 npm run dev

📍 파일

page.js - 메인 페이지 (리액트의 app.js 느낌)
layout.js - page.js을 감싸는 페이지 (헤더나 푸터 같은 공통 레이아웃 정의)
globals.css - 전역 css
page.module.css - 특정 페이지에서 import해서 사용 가능

📍 기초 문법

• 리액트랑 마찬가지로 <> </> 로 감싸기
• className 사용
• 변수 넣을 때 { } 사용
• 인라인 스타일은 style={{ }}

📍 라우팅

Next.js는 app 폴더 안에 있는 폴더들은 자동으로 url로 만들어주는 기능이 있다.
➡️ 기본 app 폴더에서 새로운 폴더(이 폴더 명이 추가 url임)와 page.js를 만들어주면 끝!

• sub폴더와 page.js를 만들어 봄.
  

• sub 주소로 이동하면 잘 완성된 걸 볼 수 있다. (폴더명 = 주소)
  (계속 하위 주소로 가려면 폴더 안에 폴더··· 만들면 된다.)