구성 요소가 포함된 NextJS getStaticProps

전역 구성 요소를 채우기 위해 서버에서 일부 콘텐츠를 가져와야 했지만 바로 사용할 수 있는 NextJSdoesn't allow for that를 깨달은 적이 있습니까? 내가 작업한 프로젝트에는 202개의 서로 다른 페이지에서 가져온 전역 탐색 모음이 있었지만 CMS에서 가져온 미리 생성된 정적 콘텐츠가 필요했습니다. 모든 단일 페이지에서 getStaticProps를 사용하는 대신 모든 콘텐츠를 한 번에 미리 생성하고 구성 요소로 직접 가져올 수 있는지 확인하기로 결정했습니다.

팀에서 이 페이지 제한getStaticProps을 해결하기로 결정한 방법은 NodeJS 빌드 프로세스를 사용하여 필요한 모든 위치에서 콘텐츠를 가져오고 구성 요소가 표준json 파일로 가져올 프로젝트에 넣는 것입니다. 개발 및 생산 환경에 따라 다른 버전을 만들 수도 있습니다.

설정

프로젝트 디렉토리에서 preBuildScripts 폴더에 추가할 좋은 위치를 찾으십시오(원하는 이름을 지정할 수 있음). 내 프로젝트 디렉토리에는 다음이 있습니다.

src -> functions -> preBuildScripts

배포할 단일 환경이 있는 경우 두 개의 파일만 필요합니다. 각각의 추가 환경에 대해 실행할 추가 파일이 필요합니다. 이 예에서는 개발 환경과 프로덕션 환경에 대한 파일을 빌드합니다.

새 파일:

preBuildUtilities.js
preBuildDev.js
preBuildProd.js

테스트 설정

preBuildUtilities.js 내부에 다음과 같은 모듈 내보내기 코드를 추가합니다.

module.exports.preBuildDevelopment = async() => {
    console.log("Loading the development content!")
}

module.exports.preBuildProduction = async() => {
    console.log("Loading the production content!")
}

이제 다른 각 파일 내에서 해당 함수를 호출할 수 있습니다.
preBuildDev.js

const {preBuildDevelopment} = require("./preBuildUtilities.js")

preBuildDevelopment();

preBuildProd.js

const {preBuildProduction} = require("./preBuildUtilities.js")

preBuildProduction();

이제 설정이 거의 완료되었습니다! 이러한 함수를 호출하는 방법은 간단합니다. NPM은 접두사가 package.json 인 pre 파일에서 스크립트를 자동으로 실행합니다. 자세한 내용은 여기에서 확인할 수 있습니다. https://docs.npmjs.com/cli/v8/using-npm/scripts#life-cycle-scripts

Package.json 파일 업데이트

package.json를 열고 다음을 표시하는 scripts 섹션을 찾습니다.

"scripts": {
    "dev": "next dev",
    "build": "next build"
}

다음과 같이 그 위에 새 스크립트를 추가합니다.

다중 환경 예

"scripts": {
    "predev": "node src/functions/preBuildScripts/preBuildDev.js",
    "dev": "next dev",

    "prebuild:dev": "node src/functions/preBuildScripts/preBuildDev.js",
    "build:dev": "next build",

    "prebuild:prod": "node src/functions/preBuildScripts/preBuildProd.js",
    "build:prod": "next build"
}

단일 환경 예

다음은 단일 환경 설정의 예입니다.

"scripts": {
    "predev": "node src/functions/preBuildScripts/preBuildDev.js",
    "dev": "next dev",

    "prebuild": "node src/functions/preBuildScripts/preBuildDev.js",
    "build": "next build"
}

특정 프로젝트에 맞게 폴더 경로를 수정해야 합니다. 이제 서버가 꺼져 있는지 확인하고 터미널을 열고 일반 명령을 실행하십시오npm run dev. 콘솔에 Loading the development content!가 표시되어야 합니다!

이제 설정이 완료되었으므로 원하는 기능을 무엇이든 추가할 수 있습니다preBuildUtilities.js.

새 파일 만들기

preBuildUtilities.js 내부에서 일부 JSON 데이터를 생성하는 샘플 API 요청을 생성해 보겠습니다. CMS에서 콘텐츠를 가져오고 데이터로 구성 요소를 채우려는 것처럼 가장합니다.

이를 위해 Star Wars API을 사용할 수 있으며 이 기능을 필요에 따라 교체할 수 있습니다. 우리는 preBuildDevelopment() 함수에 초점을 맞출 것이지만 preBuildProduction() 에 대해 동일한 패턴을 따를 것입니다.

preBuild 스크립트를 빌드하는 단계는 다음과 같습니다.

NodeJS 파일 시스템 패키지 가져오기

async/await를 사용하여 API 설정

JSON 데이터를 사용하여 프로젝트에서 새 파일을 생성합니다

.

Fetch는 아직 NodeJS에서 널리 지원되지 않기 때문에 이 예제에서는 Axios를 사용합니다. 프로젝트에 필요한 모든 종류의 HTTP 요청 시스템을 자유롭게 사용하세요. 동일하게 작동합니다.

참고: 경합 상태를 방지하기 위해 여기에서 동기식을 사용합니다. 또한 이것을 실행하기 전에 폴더가 존재하는지 확인하십시오. 그렇지 않으면 노드가 적절한 디렉토리를 찾는 동안 오류가 발생할 수 있습니다.

const fs = require('fs');
const axios = require('axios').default;

module.exports.preBuildDevelopment = async() => {
    const API = `https://swapi.dev/api/people`;

    const response = await axios.get(API);
    const data = response.data.results;

    fs.writeFileSync("./src/data/preBuild/starWarsData.json", JSON.stringify(data))
}

서버가 꺼져 있는지 확인한 다음 npm run dev 를 사용하여 시작합니다. 서버가 실행되면 파일 디렉토리를 확인하여 새 JSON 파일이 있는지 확인하십시오. 잘만되면!

이제 모든 구성 요소에서 다음과 같이 데이터를 참조할 수 있습니다.
StarWarsList.js

import starWarsData from "src/data/preBuild/starWarsData.json";

export const StarWarsList = () => {
    return (
        <ul>
            {starWarsData.map((item, index) => (
                <li key={`star-wars-item-${index}`}>{item.name}</li>
            ))}
        </ul>
    )
}

이제 구성 요소가 서버 측/정적 데이터를 활용하고 있습니다! 🎉