React 서버 측 렌더링 프레임 워크 : Next.js

기사 출처 : Lagou 빅 프런트 엔드 고소득 교육 캠프

Next.js는 React 서버 측 렌더링 애플리케이션 프레임 워크로 SEO 친화적 인 SPA 애플리케이션을 구축하는 데 사용됩니다.

두 가지 사전 렌더링 방법, 정적 생성 및 서버 측 렌더링을 지원합니다.
페이지 기반 라우팅 시스템, 라우팅 제로 구성
자동 코드 분할 : 페이지 로딩 속도 최적화.
정적 내보내기를 지원하면 응용 프로그램을 정적 웹 사이트로 내보낼 수 있습니다.
내장 CSS-in-JS 라이브러리 스타일 -jsx
이 솔루션은 성숙하고 생산 환경에서 사용할 수 있으며 전 세계 많은 회사에서이를 사용하고 있습니다.
응용 프로그램 배포는 자체 배포 환경 인 Vercel을 사용하여 간단하며 다른 환경에도 배포 할 수 있습니다.

첫째, Next.js 프로젝트 생성

생성됨 : npm init next-app next-guide
실행 : npm run dev
액세스 : 프로젝트 를 생성하는 데 사용되는 localhost:3000
임시 설치 입니다.create-next- appNext.js

2. 페이지 기반 라우팅 시스템

1. 페이지 만들기

Next.js에서 페이지는 페이지 폴더에있는 React 컴포넌트로, 컴포넌트는
기본적으로 익스포트해야합니다.
React는 컴포넌트 파일에 포함 할 필요 가 없습니다.

pages / list.js

export default function List () {
    
    
  return (
    <div>List Page</div>
  )
}

액세스 주소 : http://localhost:3000/list
페이지 주소는 파일 주소에 해당합니다.

2. 페이지 점프

기본적으로 링크 구성 요소는 JavaScript를 사용하여 페이지로 이동합니다. 즉, SPA 형식의 점프입니다.
브라우저에서 JavaScript가 비활성화 된 경우 링크를 사용하여 점프합니다.
링크 구성 요소는 href 이외의 속성을 추가하면 안됩니다 . 어트리뷰트와 나머지 어트리뷰트는 위의 태그에 추가됩니다
Link 컴포넌트는 프리 페치 (생산 중) 기능을 통해 최상의 성능을 위해 자동으로 애플리케이션을 최적화합니다.

import Link from 'next/link'

export default function Home() {
    
    
  return <div>
    Index Page works
    <Link href="/list"><a>Jump to List Page</a></Link>
  </div>
}

셋, 정적 자원, 메타 데이터 및 CSS

1. 정적 자원

응용 프로그램 루트 디렉터리의 공용 폴더는 정적 리소스를 제공하는 데 사용됩니다.

다음 양식을 통해 액세스 :

public / images /
1.jpg- > /images/1.jpg public / css / base.css-> /css/base.css

2. 페이지 메타 데이터 수정

Head 구성 요소를 통해 메타 데이터 수정

import Head from 'next/head'

<>
  <Head>
    <title>next app</title>
  </Head>
</>

3. CSS 스타일

3.1 내장 스타일 jsx

Styled-jsx는 React 컴포넌트에서 CSS를 작성할 수있는 CSS-in-JS 라이브러리 인 Next.js에 빌드되며 CSS는 컴포넌트 내에서만 작동합니다.

export default function Home() {
    
    
  return <>
    <Head>
      <title>Index Page</title>
    </Head>
    <div>
      Index Page works
      <Link href="/list"><a className="demo">Jump to List Page</a></Link>
      <img src="/images/1.jpeg" height="100" />
    </div>
    <style jsx>{
    
    `
      .demo {
        color: red
      }
    `}</style>
  </>
}

3.2 CSS 모듈

CSS 모듈 기능을 사용하여 컴포넌트의 CSS 스타일을 별도의 CSS 파일에 작성할 수 있습니다.
CSS 모듈 규칙 스타일 파일 이름은"组件文件名称.module.css"

pages / list.js

import Head from "next/head";
import style from './list.module.css'

export default function List () {
    
    
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
    
    style.demo}>List Page</div>
    </>
  )
}

page / list.module.css

.demo {
    
    
  color: green;
  font-size: xx-large;
}

3.3 전역 스타일 파일

_app.js파일 에 새 페이지 폴더를 추가하고 다음 코드를 추가하십시오.
프로젝트 루트 디렉토리에 스타일 폴더를 만들고 그 안에 global.css를 만듭니다.
_app.js에서 import를 통해 global.css를 가져옵니다.
개발 서버 다시 시작

pages / _app.js

import '../styles/globals.css'

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

export default MyApp

styles / globals.css

html,
body {
    
    
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  background: tomato;
}

a {
    
    
  color: inherit;
  text-decoration: none;
}

* {
    
    
  box-sizing: border-box;
}

넷째, 사전 렌더링

1. 사전 렌더링 개요

사전 렌더링은 데이터와 HTML의 접합이 서버 측에서 미리 완료되는 것을 의미합니다.
사전 렌더링은 SEO를 더 친숙하게 만들 수 있습니다.
사전 렌더링은 더 나은 사용자 경험을 제공하며 JavaScript를 실행하지 않고도 애플리케이션 UI를 볼 수 있습니다.

2. 두 가지 형태의 사전 렌더링

Next.js에서는 정적 생성과 서버 측 렌더링이라는 두 가지 형태의 사전 렌더링이 지원됩니다.
정적 생성과 서버 측 렌더링은 HTML을 생성하는 타이밍이 다릅니다.
정적 생성 : 정적 생성은 빌드시 HTML을 생성하는 것입니다. 모든 후속 요청은 빌드 중에 생성 된 HTML을 공유합니다.
서버 측 렌더링 : 서버 측 렌더링은 요청시 HTML을 생성하는 것입니다. 모든 요청은 HTML을 다시 생성합니다.

3. 두 가지 사전 렌더링 방법 선택

Next.js를 사용하면 개발자가 각 페이지에 대해 서로 다른 사전 렌더링 방법을 선택할 수 있습니다. 서로 다른 사전 렌더링 방법은 특성이 다르며 장면에 따라 렌더링해야합니다.
그러나 대부분의 페이지는 정적 생성을 사용하는 것이 좋습니다.
정적 생성은 한 번 구축되어 반복적으로 사용되며 페이지가 미리 생성되기 때문에 액세스 속도가 빠릅니다.
적용 가능한 시나리오 : 마케팅 페이지, 블로그 게시물, 전자 상거래 제품 목록, 도움말 및 문서.
서버 측 렌더링 액세스 속도는 정적 생성만큼 빠르지는 않지만 각 요청이 다시 렌더링되기 때문에 자주 업데이트되는 데이터가있는 페이지 또는 요청에 따라 콘텐츠가 변경되는 페이지에 적합합니다.

4. 데이터가없고 데이터가있는 정적 생성

구성 요소가 다른 위치에서 데이터를 가져올 필요가없는 경우 직접 정적으로 생성됩니다.
구성 요소가 다른 위치에서 데이터를 가져와야하는 경우 Next.js는 구성 중에 사전에 구성 요소에 필요한 데이터를 가져온 다음 구성 요소를 정적으로 생성합니다.

5. 정적으로 getStaticProps 생성

getStaticProps 메서드의 기능은 구성 요소의 정적 생성에 필요한 데이터를 가져 오는 것입니다. 그리고 소품을 통해 데이터를 구성 요소에 전달합니다.
이 메서드는 비동기 함수이며 구성 요소 내에서 내 보내야합니다.
개발 모드에서 getStaticProps는 모든 요청에서 실행되도록 변경됩니다.
프로덕션 모드에서 getStaticProps는 빌드시에만 실행되며 getStaticProps 메소드는 / list 페이지에 액세스 할 때마다 실행되지 않습니다.

pages / list.js

import Head from "next/head";
import style from './list.module.css'
import {
    
     readFile } from "fs";
import {
    
     promisify } from "util";
import {
    
     join } from "path";

const read = promisify(readFile)

export default function List ({
    
    data}) {
    
    
  return (
    <>
      <Head>
        <title>List Page</title>
      </Head>
      <div className={
    
    style.demo}>List Page</div>
      <div>{
    
    data}</div>
    </>
  )
}

export async function getStaticProps () {
    
    
  let data = await read(join(process.cwd(), 'pages', '_app.js'), 'utf-8')
  console.log(data) // 会在 node 环境下输出，这个函数会在构建时运行
  return {
    
    
    props: {
    
    
      data
    }
  }
}

6. 서버 측 렌더링 getServerSideProps

서버 측 렌더링을 사용하는 경우 컴포넌트에서 getServerSideProps 메소드를 내 보내야합니다.

list.js의 getStaticProps 메소드를 getServerSideProps 메소드로 변경하십시오. 여기서 getServerSideProps에도 컨텍스트 매개 변수가 있습니다.

getServerSideProps 메소드는 개발 모드에서 실행되지 않습니다.

프로덕션 모드에서
실행 npm run build하여 .next 폴더 를 생성하면 목록 페이지가 HTML 페이지를 생성하지 않음을 알 수 있습니다.
그런 다음 npm start프로덕션 환경을 시작하는 코드를 실행 하고 / list 페이지를 방문하면 노드 콘솔이 getServerSideProps 메서드에서 print 문을 출력합니다.
getServerSideProps를 사용하기 때문에 정적 생성 대신 서버 측 렌더링이 사용되므로 방문 할 때마다 getServerSideProps 메서드가 실행됩니다.

6. 동적 라우팅 기반 정적 생성

매개 변수를 기반으로 페이지 구성 요소에 대한 HTML 페이지를 생성하고 매개 변수가있는만큼 HTML 페이지를 생성합니다.
애플리케이션을 빌드 할 때 먼저 사용자가 액세스 할 수있는 모든 라우팅 매개 변수를 가져온 다음 라우팅 매개 변수를 기반으로 특정 데이터를 가져온 다음 데이터를 기반으로 정적 HTML을 생성합니다.

7. 동적 라우팅 기반 정적 생성 실현

동적 라우팅을 기반으로 페이지 구성 요소 파일을 만들고 이름을 지정할 때 [id] .js와 같이 파일 이름 외부에 []를 추가합니다.
모든 사용자가 액세스 할 수있는 라우팅 매개 변수를 가져 오는 데 사용되는 비동기 함수 getStaticPaths를 내 보냅니다.

export async function getStaticPaths () {
    
    
  // 此处获取所有用户可以访问的路由参数
  return {
    
    
    // 返回固定合适的路由参数
    paths: [{
    
    params: {
    
    id: 1}}, {
    
    params: {
    
    id: 2}}],
    // 当用户访问的路由有参数没有在当前函数中返回时，是否显示 404 页面， false 表示显示， true 表示不显示
    fallback: false
  }
}

라우팅 매개 변수를 기반으로 특정 데이터를 가져 오는 데 사용되는 비동기 함수 getStaticProps를 내 보냅니다.

export async function getStaticProps ({
    
    params}) {
    
    
  // params -> {id: 1}
  // 此处根据路由参数获取具体数据
  return {
    
    
    // 将数据传递到组件中进行静态页面的生成
    props: {
    
    }
  }
}

참고 : getStaticPaths 및 getStaticProps는 서버 측에서만 실행되고, 클라이언트 측에서는 실행되지 않으며, 클라이언트 측 JavaScript로 패키징되기도합니다. 즉, 데이터베이스 쿼리와 같은 서버 측 코드를 마음대로 작성할 수 있습니다.

8. 사용자 지정 404 페이지

사용자 지정 404 페이지를 생성하려면 페이지 폴더에 404.js 파일을 생성해야합니다.

export default function Error () {
    
    
  return <div>404 ~</div>
}

五、 API 경로

1. API 경로 구현 방법

pages / api 폴더에 API 경로 파일을 만듭니다. user.js와 같은
요청 처리 기능은 기본적으로 파일에 내보내지며, 함수에는 두 개의 매개 변수가 있습니다. req는 요청 객체, res는 응답 객체입니다.

export default function (req, res) {
    
    
  res.status(200).send({
    
    id: 1, name: 'TOM'})
}

참고 : 현재 API 경로는 모든 Http 요청 방법을 수락 할 수 있습니다.

API 경로에 액세스 : localhost : 3000 / api / user
getStaticPaths 또는 getStaticProps 함수에서 API 경로에 액세스하지 마십시오.이 두 함수는 서버 측에서 실행되므로 서버 측 코드를 직접 작성할 수 있습니다.

여섯, 영화 프로젝트

1. 프로젝트 생성

npm init next-app movie
cd movie
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm install react-icons
npm install @emotion/babel-preset-css-prop -D
npm install @babel/core
npm run dev

방문 : localhost : 3000

pages / _app.js

// import '../styles/globals.css'

import {
    
     ChakraProvider } from '@chakra-ui/react'
import theme from '@chakra-ui/theme'

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

export default MyApp

2. 데이터 서비스 시작

npm install
npm run dev

데이터 서비스 주소 IP : localhost : 3005

axiosConfig.js 파일로 내보내기 baseURL = 'http://localhost:3005'

3. 코드 작성

4. 정적 파일 생성

npm run export
serve out

방문 : localhost : 5000

5. 다음 서비스 사용자 지정

package.json

    "mydev": "nodemon server/index.js",

server / index.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'

const app = next({
    
    dev})

const handler = app.getRequestHandler()

// prepare 方法是准备一下 next 应用
app.prepare().then(() => {
    
    
  const server = express()

  server.get('/hello', (req, res) => {
    
    
     res.send('Hello Next.js')
  })

  server.get('*', (req, res) => {
    
    
    handler(req, res)
  })

  server.listen(3000, () => console.log('服务器启动成功，请访问: http://localhost:3000'))
})

6. Vercel에 배포

먼저 데이터 서비스를 내 서버에 배포했으며 주소는 http://jiailing.com:3005이며이 주소는 axiosConfig.js 파일에 작성되어야하며 baseURL 변수를 제공해야합니다.

그런 다음 GitHub에 리포지토리를 만들고 프로젝트 코드를 GitHub 리포지토리로 가져옵니다. 그런 다음 https://vercel.com/에 로그인하고 배포 할이 GitHub 리포지토리를 선택합니다.