Next.js란?
React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크
작동방식
Next.sj는, 기본적으로 서버측에서 React코드를 실행한다.
React.js를 서버측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다.
그 후, 브라우저에서 React를 사용해 웹페이지를 완성한다.
장점
javascript로 모든 페이지를 구성하는 React와는 다르게,
서버사이드 렌더링을 하게되면 검색엔진들이 html을 직접검색할 수 있으므로, 검색어 노출에 좋다. (SEO)
React.js로 웹 애플리케이션 만들기 위한 조건
- 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 한다.
- 코드 분할과 같은 프로덕션 최적화를 수행해야 한다.
- 성능 향상 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링한다.
- 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용한다.
- React 앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 한다.
Next.js의 주요 기능
- 직관적인 페이지 기반 라우팅 시스템( 동적 경로 지원 포함 )
- 사전 렌더링, 정적 생성(SSG) 및 서버 측 렌더링(SSR) 모두 페이지 단위로 지원된다.
- 자동 코드 분할! ( 빠른 로딩 )
- 최적화된 프리페치를 통한 클라이언트 측 라우팅
- 내장 CSS 및 Sass 지원 및 모든 CSS-in-JS 라이브러리 지원
- Fast Refresh를 지원한다. ( 빠른 리프레쉬 )
- Serverless Functions로 API 엔드포인트를 빌드하기 위한 API 경로
- 완전히 확장 가능
Next.js 프로젝트 시작하기 ( create-next-app )
npx create-next-app nextjs-blog
// or - typescript
npx create-next-app@latest --ts
// or
yarn create next-app --typescript
// or
pnpm create next-app -- --ts
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 start_next )
npm run dev
새로운 페이지 만들고 접속하기
Next에서 기본적으로 생성되는 pages 폴더 내부에 파일을 만들면,
이를 자동으로 인식해, 라우팅까지 해줍니다.
// first-post.js
export default function FristPost() {
return <h1>First Posts</h1>
}
링크로 페이지 접속하기
Next 기능 중, <Link> 태그를 사용합니다.
( 13버전 부터, a태그를 쓰지 않아도 된다ㅎㅎ )
//index.js 중간..
<h1 className={styles.title}>
Read{" "}
<Link href="/posts/first-post">this page!</Link>
</h1>
<Link>의 장점과 상세설명
<장점>
기존 HTML의 <a> 태그로 이동하면, 이전에 접속했던 페이지라도 서버에 다시 요청해 데이터를 받아와야하지만,
Next의 <Link>를 사용하면, 이전에 받아온 데이터는 다시 요청하지 않는다!
<상세설명>
1. Next.js는 코드 분할을 자동으로 수행하므로 각 페이지는 해당 페이지에 필요한 것만 로드합니다.
즉, 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않습니다. ( 기본 React는 처음부터 제공 - SPA )
이렇게 하면 수백 페이지가 있는 경우에도 홈페이지가 빠르게 로드할 수 있습니다.
요청한 페이지의 코드만 로드하면 페이지가 격리됩니다.
특정 페이지에서 오류가 발생하더라도, 나머지 애플리케이션은 계속 작동할 수 있습니다.
2. Next.js의 프로덕션 빌드에서 Link가 브라우저의 화면(뷰포트)에 나타날 때마다,
Next.js는 백그라운드에서 연결된 페이지 코드를 미리 가져옵니다.
링크를 클릭하기전에, 페이지에 대한 코드가 이미 백그라운드에서 로드되므로
페이지 전환이 거의 즉각적으로 이루어집니다!
<번외>
Next 프로젝트에 포함되지 않은 링크를 넣을땐, <a> 태그를 사용해야 합니다.
href의외의, 여러가지 속성 (ex: className)을 추가하고 싶을땐, <Link>태그 내부의 <a>태그에 추가합니다.
반응형
