[App 개발] Next.js

🐰: 채팅앱을 개발하면서는

기초를 탄탄히 하는것을 목표로 했기에!

 

내가 사용하는 프레임워크와 언어에 대해 확실히

이해하고 넘어가는 것을 목표로 하였다!

 

그래서 Next.js에 대해서 공부한 것을 정리해보고자 한다.

 

 

Next.js 공식 사이트

https://nextjs.org/

Next.js by Vercel - The React Framework

 

 

Next.js란?

리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(server-side renderings(SSR)), 정적 사이트 생성(static site generation(SSG)), 중분 정적 재생성(incremental static regeneration(ISR))과 같은 다양하고 풍부한 기능을 제공한다.

React는 라이브러리이고, Next.js는 프레임워크이다. 라이브러리는 코드 내에서 사용하는 것으로 원하는 아키텍처를 사용하여 원하는 방식으로 코드를 작성하는 것으로 사용의 주체가 사용자에게 있다. 반면 프레임워크는 여러가지 결정을 사용자 대신 해주며 자동화 하도록 할 수 있도록 해주는, 주도권이 프레임워크에 있다.

 

Next.js 만의 강점

 

- 수 많은 내장 컴포넌트와 플러그인 덕분에 소규모 웹 사이트뿐 아니라 거대한 상용 애플리케이션에도 즉시 적용가능

- 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 만들기 위한 여러가지 방법을 제공

- 클라이언트와 서버에서 실행할 수 있는 코드에 풍부하고 다양한 기능을 제공

- 타입스크립트 지원

- 바벨과 웹팩 설정 커스터마이징

-풀스택 웹 어플리케이션 제작 가능

 

 

Next.js  시작하기

1. 개발환경에 Node.js와 npm 설치

 

2. 원하는 위치에 프로젝트 폴더 만들기

mkdir "프로젝트이름"

 

3. 폴더를 만든후 프로젝트폴더로 이동, vscode로 해당 폴더를 오픈해준다.

 

4. 프로젝트를 심고, packaje.json 파일로 가서 "license" 부분만 ISC -> MIT 수정

npm init -y

 

 

5. react, next, react-dom 최신버전 설치

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

=> react-dom역할 : react에서 구성한 UI와 그외의 다른 모든것을 브라우저의 Document Object Model(DOM)에 렌더하는 역할

 

6. packaje.json 파일에서 script 부분 수정

"script":{
	"dev": "next dev"
},

=> dev라는 script를 만들고 next dev라는 명령어를 지정한것 -> dev 명령어를 실행하면 Next.js 실행됨

 

7. vscod에서 app이라는 폴더를 만들고 그 안에 page.tsx 라는 파일을 만든다.

📍폴더명과 파일 이름은 Next.js와의 약속이기 때문에 무.조.건 app, page(대소문자까지 그대로) 로 만들어야 한다.

📍page의 확장자는 .jsx여도 괜찮지만 나는 타입스크립트를 사용할 계획이라 .tsx로 제작하였다.

 

8. page.tsx 파일 export 시키기

export default function Index(){
	return <h1>Hello Nex.js!</h1>
}

 

9. console창에 프로젝트 폴더 안에서 실행시키기

npm run dev

그럼 이렇게 locallhost:3000 주소로 실행된다!

 

위 주소로 이동하면 화면에 Hello Next.js! 가 뜬것을 확인 할 수 있다.