[Next.js] Next.js 기본 개념

By sero.

📔 Studying/💌 TIL

2023. 1. 31. 21:10

728x90

Today, What I learned?

리액트 프레임워크인 Next.js에 대한 공부를 시작했다.

Next.js가 어떤 이유로 도입되게 되었는지와 리액트 프로젝트 구조와 다른 점들에 대해 정리해 본다.

Next.js 는 어쩌다가 탄생했을까?

Next.js는 리액트를 기반으로 하는 서버사이드 렌더링 프레임워크(SSR)다.

기존 리액트는 클라이언트 사이드 렌더링(CSR)인데, CSR은 SPA를 바탕으로 새로고침 없이 웹페이지를 이용할 수 있는 유저의 편의성이 개선되었지만 자바스크립트 번들 사이즈가 커져서 초기 로딩속도가 증가되었다는 단점이 있었다.

이를 개선하기 위해 현재 페이지에서 필요한 자바스크립트 파일만을 로딩하는 코드분할(Code Split, Lazy-loading)을 적용하기 시작했다. 하지만!.. CSR은 매번 클라이언트가 index.html을 렌더링 했기 때문에 크롤링에 필요한 사이트 정보가 부족하여 SEO에 불리하다는 점이 있었다.

속도가 빠르면서 SEO를 최적화할 수 있는 것은 없을까?.. 🤔 를 시작으로 리액트 기반의 Next.js, 뷰 기반의 Nuxt.js 같은 프레임워크가 등장했다.

Next.js 시작하기

Next.js 공식문서에 가면 이러한 것들을 제공하는 아주 멋진 프레임워크임을 알 수 있다.

페이지 기반 라우팅 시스템과 동적 라우트를 제공하고,

각 페이지의 HTML을 미리 렌더링(pre-rendering)하는 것과 SSG와 SSR을 모두 제공한다.

또 API Routes를 통해 서버 없이 간단한 API를 만들 수도 있다.

아래 명령어를 입력하면 프로젝트를 생성할 수 있다.

npx create-next-app 프로젝트명

yarn create next-app 프로젝트명

Next.js 프로젝트 구조 뜯어보기

package.json

프로젝트를 열고 나서 package.json의 script를 보면 리액트 프로젝트와 조금 다른 것을 알 수 있는데, 각각 이렇다.

dev : 개발모드로 프로젝트 실행. 개발 환경에서 유용하게 쓰이는 기능들을 제공한다.
build : 프로덕션 모드(배포용)로 빌드하여 .next 폴더를 생성한다. 배포용이기 때문에 개발모드의 기능들이 빠진다.
start : 빌드된 파일을 실제 배포 환경에서 동일하게 실행해 준다. (먼저 빌드가 되어있어야 함)

pages 폴더

위에도 언급했다시피 next.js는 페이지 기반 라우팅이다. pages 안의 각 폴더명이 주소 역할을 하고, 내부 파일들이 경로가 된다.

위와 같은 구조일 때 post 페이지의 경우 http://localhost:3000/post/1 이 경로가 될 수 있겠다.

_app.js

pages 폴더 내에서도 가장 먼저 렌더링 되는 파일이다.

import '../styles/globals.css' 

function MyApp({ Component, pageProps }) { 
    return <Component {...pageProps} /> 
} 

export default MyApp

<Component> 컴포넌트가 실제 페이지 컴포넌트에 해당한다.

여기서는 공통적인 레이아웃(헤더나 푸터.. 등)과 global CSS를 적용할 수 있다는 특징이 있다.

index.html의 부재

next.js는 자바스크립트로만 이루어진 프로젝트이기 때문에 리액트처럼 index.html 파일을 바로 확인해 볼 수 없다.
그럼 index.html 의 <head> 태그 안에 들어가던 것들은 어떻게 넣어주는지?...🤔

내장 컴포넌트인 <Head> 컴포넌트로 넣어줄 수 있다.

import '../styles/globals.css';
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <div>
     <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

Next.js의 기초 개념에 대해서 간략하게 정리해 보았다.
리액트와 구조가 살짝 다르긴 하지만 익숙해질 수 있으리라 생각하며!.. 🥺

728x90

저작자표시 비영리 변경금지

'📔 Studying > 💌 TIL' 카테고리의 다른 글

투두리스트 Recoil로 리팩토링 (0)	2023.02.02
[Next.js] Next.js의 SSG, ISR (0)	2023.02.01
[TypeScript] 검색 기능 구현하기 (0)	2023.01.27
[TypeScript] redux-toolkit과 redux-thunk 같이 사용하기 (0)	2023.01.26
[TypeScript] 리액트 파이어베이스 소셜 로그인 트위터 추가하기 (1)	2023.01.25

Category

Recent Post

Popular Post

Comment

Tags

Visitor Counter