Next.js
Next.js 는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크 이다.
특징
- 개발 환경 설정이 쉽고 간단하다.
- SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
- 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다.
기본적으로 CSR을 하는 React 애플리케이션은 SEO에 취약함 -> next.js를 도입하면 pre-rendering을 통해 SSR 또는 SSG를 가능하게 해줌 -> 성능과 SEO에 좋음
프로젝트 시작하기
npx create-next-app기본 구조 및 기능
개발 모드와 프로덕션 모드
// package.json
...
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...dev-next dev개발 모드로 프로젝트를 실행- Hot reloading 등 개발 환경에 유용한 기능들 제공
build-next build제품 배포 용도로 프로젝트를 빌드start-next startbuild를 통해 만들어진 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일.
_App.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp- 각각의 페이지가 렌더링 될 때 가장 먼저 실행되는 파일이
_App.js파일이다. - 활용 예시
- 공통된 레이아웃 페이지 작성
- 글로벌 CSS 적용
Next.js에는 html 파일이 존재하지 않는다.
create-react-app 으로 만들어진 프로젝트와는 다르게, next.js는 눈에 보이는 html 파일이 따로 존재하지 않는 100% 자바스크립트로 이루어진 프로젝트. 그렇기 때문에, 기존 head 태그에 스크립트나 메타 태그를 추가하기 위해서는, next에서 제공하는 컴포넌트를 사용해야 한다.
<Head> 태그
import "../styles/globals.css";
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<title>테스트</title>
</Head>
<h2>Header</h2>
<Component {...pageProps} />
<h2>Footer</h2>
</div>
);
}
export default MyApp;Head 컴포넌트를 이용하면 meta tag 및 스크립트를 쉽게 프로젝트에 추가할 수 있다.
Static File Serving
- Public 폴더 안에 파일을 추가하면 정적 파일을 쉽게 가져올 수 있음.
주니어 개발자 기술노트