Next.js란?

React에서 서버 사이드 렌더링(SSR)을 간편하게 해주는 프레임워크

Next.js의 작동방식

Next.js는 기본적으로 서버 측에서 React코드를 실행한다.

React.js를 서버 측에서 pre-rendering하여
html을 생성하고, 브라우저에게 보내준다.

그 후 브라우저에서 React를 사용해 웹 페이지를 완성한다.

Next.js의 장점

javascript로 모든 페이지를 구성하는 React와는 다르게,

Next.js의 서버사이드 렌더링(SSR)을 하게되면
검색엔진들이 html 데이터를 직접 검색할 수 있어서
검색어 노출에 좋다. (SEO에 유리)

React.js와 Next.js의 차이

React.js

• 코드는 webpack과 같은 번들러를 사용하여 번들링되고
  Babel과 같은 컴파일러를 사용하여 변환되어야 한다.
• 코드 분할과 같은 프로덕션 최적화를 수행해야 한다.
• 성능 향상 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링한다.
• 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용한다.
• React 앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 한다.

Next.js의 주요 기능

• 직관적인 페이지 기반 라우팅 시스템(동적 경로 지원 포함)
• 사전 렌더링, 정적 생성(SSG) 및 서버 측 렌더링(SSR) 모두 페이지 단위로 지원된다.
• 자동 코드 분할! (빠른 로딩)
• 최적화된 pre-fetch를 통한 클라이언트 측 라우팅
• 내장 CSS, Sass 및 모든 CSS-in-JS 라이브러리 지원
• 새로고침이 빠르다.
• Serverless Functions로 API 엔드포인트를 빌드하기 위한 API 경로 완전히 확장 가능

Next.js 프로젝트 시작하기

npx create-next-app nextjs-blog

ESLint , Prettier 설치

yarn add prettier eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

타입스크립트 사용 시 추가

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser

ESLint, Prettier 설정 파일 만들기

// .eslintrc.json
{
  "extends": ["react-app", "prettier/prettier"],
  "plugins": ["react-hooks", "simple-import-sort", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }],
    "comma-dangle": ["error", "always-multiline"],
    "object-curly-spacing": ["error", "always"],
    "space-in-parens": ["error", "never"],
    "computed-property-spacing": ["error", "never"],
    "comma-spacing": ["error", { "before": false, "after": true }],
    "eol-last": ["error", "always"],
    "quotes": ["error", "single"],
    "no-tabs": "error",
    "semi": ["error", "never"],
    "import/no-anonymous-default-export": 0,
    "object-shorthand": "error",
    "padding-line-between-statements": [
      "error",
      { "blankLine": "always", "prev": "*", "next": "return" }
    ],
    "@typescript-eslint/no-redeclare": 0
  }
}

// .prettierrc.json
{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "bracketSpacing": true,
  "endOfLine": "auto",
  "useTabs": false
}

Next 서버 작동하기

시작하기

cd 프로젝트 폴더
npm run dev

• 주소창에 localhost:3000 입력하여 접속

새로운 페이지 만들고 접속하기

Next에서 기본적으로 생성되는 pages 폴더 내부에 파일을 만들면,
이를 자동으로 인식해 라우팅까지 해준다.

// first-post.js

export default function FristPost() {
  return <h1>First Posts</h1>
}

Link로 페이지 접속하기

Next 기능 중, 태그를 사용

//index.js 중간..

<h1 className={styles.title}>
  Read{" "}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

<Link>의 장점

1. 기존 HTML의 <a> 태그로 이동하면, 이전에 접속했던 페이지라도 서버에 다시 요청해 데이터를 받아와야 하지만,
   Next의 를 사용하면 이전에 받아온 데이터는 다시 요청하지 않는다.

2. Next.js는 코드 분할을 자동으로 수행하므로, 각 페이지는 해당 페이지에 필요한 것만 로드한다.

   즉, 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않는다. (React는 처음부터 제공 - SPA )

   => 이렇게 하면 수백 페이지가 있는 경우에도 홈페이지가 빠르게 로드할 수 있음

   => 또한 요청한 페이지의 코드만 로드하면 페이지가 격리되어, 특정 페이지에서 오류가 발생하더라도 나머지 애플리케이션은 계속 작동할 수 있다.

3. Next.js의 프로덕션 빌드에서 Link가 브라우저의 화면(뷰포트)에 나타날 때마다, 사용자가 링크를 클릭하기전에 Next.js가 백그라운드에서 연결된 페이지 코드를 미리 로드하므로
   페이지 전환이 거의 즉각적으로 이루어진다.

그 외

• Next 프로젝트에 포함되지 않은 링크를 넣을 때는
  <a> 태그를 사용해야 한다.

• href 외에 다른 속성(ex: className)을 추가하고 싶을 때는 <Link>태그 내부의 <a>태그에 넣어 추가한다.

  
  

  출처: https://defineall.tistory.com/1037