01 | next.js 시작하기

2023.08.19 기준

 

Next.js란?

Next.js는 React를 기반으로 한 웹 프레임워크로, 웹 애플리케이션 개발을 더 효율적으로 만들 수 있도록 도와주는 도구이다. 번들러인 Webpack과 컴파일러인 Babel과 같은 기술을 활용하여, 코드를 변환하고 최적화하는 역할을 수행함 이를 통해 개발자들은 프로덕션 환경에서의 성능, 검색 엔진 최적화(SEO), 그리고 서버 사이드 렌더링(SSR)과 같은 고급 기능을 쉽게 구현 가능하다. 프레임워크를 사용하기 위해서는 먼저 Visual Studio Code와 같은 통합 개발 환경(IDE)과 Node.js가 설치되어 있어야 한다.

 

1) node.js 설치

https://nodejs.org/ko

Node.js

 

2) 터미널에 입력

npx create-next-app@latest

 

3) 설정에 맞게 설치 진행

터미널에 명령어 입력시 물어보는 옵션들

4) 터미널에 입력

npm run dev

 

5) localhost:3000에 접속하여 실행

만들어 둔 템플릿을 볼 수 있다.

 

6) src/app/page.js를 수정하여 웹 만들기

import Image from 'next/image'
import styles from './page.module.css'

export default function Home() {
  return (
	// 이렇게 return만 남겨둬도 됨.
  )
}

README.md, src/app 아래 파일을 다 지우고 사용해도 무방하다.

다음은 이 코드를 github에 올리고, vercel에 연동하는 방법에 대해 설명해볼까 한다.