Next 1장 - 기초

Next.js

Next.js 소개

• 리액트 기반의 서버 사이드 렌더링 프레임 워크이다.
• Next.js는 검색 엔진 최적화(SEO)에 유리하며, 서버 사이드 렌더링으로 모든 페이지에 대한 HTML 마크업이 서버에서 생성된다.
• 페이지가 완전히 로드되기 전에 사용자에게 보여지는 컨텐츠가 있기 때문에 사용자 경험을 높이고, 초기 로딩 시간을 단축한다.
• 자동 코드 분할, 환경 변수, TypeScript 지원 등과 같은 기능을 제공하기 때문에 개발 생산성을 높인다.
• 확장성이 높기 때문에 애플리케이션의 규모가 커질수록 유용하다.

Next.js와 React 차이

1. 서버 사이드 렌더링 (SSR)
   1. React는 클라이언트 측에서만 렌더링되지만 Next.js는 서버 측에서도 렌더링할 수 있다.
   2. SSR은 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 개선하는 데 도움이 된다.
2. 정적 사이트 생성 (SSG)
   1. Next.js는 빌드 시점에 페이지를 렌더링하고 HTML 파일을 생성하여 정적 사이트를 생성할 수 있다.
   2. SSG는 페이지 로딩 속도를 더욱 빠르게 만든다.
3. 파일 시스템 기반 라우팅
   1. Next.js는 파일 시스템 기반 라우팅을 사용한다.
   2. 개발자가 페이지 및 경로를 생성하고 구성하는 데 더욱 편리하고 직관적인 방법을 제공한다.
4. 개발 생산성
   1. Next.js는 자동 코드 분할, TypeScript 지원 등과 같은 기능을 제공하여 개발 생산성을 높인다.

시작하기

• Next.js 설치 후 프로젝트를 실행한다.

npx create-next-app 프로젝트 이름
npx create-next-app --typescript
npm run dev

구조 파악하기

• example_next_app
  • .next : Next.js가 빌드한 결과물이 저장되는 디렉토리
  • components : React 컴포넌트들이 저장되는 디렉토리
  • pages : 애플리케이션의 각 페이지에 해당하는 파일들, 파일 이름은 해당 페이지의 URL 경로와 일치해야 한다.
    • pages/about.js 파일은 /about 경로에서 렌더링된다.
  • public : 정적 파일이 저장되는 디렉토리
  • styles : 스타일 파일이 저장되는 디렉토리, Sass / Css-in-JS 모두 지원
  • node_modules
  • package.json
  • package-lock.json
  • README.md

Next.js의 페이지

• pages라는 특수한 폴더 안에 우리가 만들고 싶은 각 페이지를 위한 별도의 폴더를 만들고, 해당 폴더는 페이지의 URL 이름과 일치해야 한다.
  • https://example.com/blog => pages/blog

Dynamic routing

• 다이나믹 라우팅은 동적인 URL을 처리하는 방법이다.
• 웹 페이지마다 고유한 URL이 있는데 이를 다이나믹 라우팅을 사용하여 쉽게 각 페이지를 보여줄 수 있다.
• https://example.com/blog/post/1과 같은 주소를 가진 페이지에서 1은 게시물의 고유한 ID 값이다.
• 다이나믹 라우팅을 사용하면 이러한 변수를 사용하여 웹 사이트의 여러 페이지를 만들 수 있다.
• URL의 구조에 따라 폴더와 파일을 만든다.
  • https://example.com/blog/post/1 => pages/blog/post/[id].js
  • URL에서 id라는 변수를 사용할 수 있다.

예시 코드

• useRouter 훅을 사용하여 현재 페이지의 URL을 가져오고, router.query 객체에서 id 변수를 가져와 사용할 수 있다.

// blog/post/[id].js
import {useRouter} from "next/router";

function BlogPost(){
    const router = useRouter();
    const {id} = router.query;

    // id를 사용하여 해당 게시물의 내용을 가져오는 코드 작성

    return (
        <div>
            <h1>블로그 게시물 페이지</h1>
            <p>게시물 ID : {id}</p>
            {게시물 내용}
        </div>
    )
}

export default BlogPost;

기본 번들러 설정

// next.config.js

const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;