다음JS. getStaticProps 및 일부 동적 데이터에서 notFound를 사용하시겠습니까? 재확인하는 것을 잊지 마세요!

NextJS에 정적 페이지가 있고 일부 동적 데이터가 "notFound"를 반환할지 여부를 결정하는 경우 항상 return 문에 "revalidate"를 사용하십시오.


그러한 경우가 전혀 배제되지 않기 때문에 내가 의미하는 바를 보여 드리겠습니다.

우리는 NextJs è Express 을 사용할 것입니다.

NextJS 프로젝트 생성

다음을 실행하여 NextJs 애플리케이션을 생성해 보겠습니다.

yarn create next-app --typescript

설치가 완료되면 yarn dev를 실행하여 http://localhost:3000에서 개발 서버를 시작합니다.

페이지를 열면 다음과 유사한 내용이 표시됩니다.



내부pages는 내용이 포함된 파일[url].tsx을 생성합니다.

export const getStaticPaths = async () => {
    return {
        paths: [
            {
                params: {
                    url: 'test',
                }
            },
        ],
        fallback: 'blocking',
    }
}

export const getStaticProps = async () => {

    // Request to api
    const response = await fetch('http://localhost:3001')
    const body = await response.json()

    // If page not exists return "Not found"
    if (!body.status) {
        return {
            // This can be a problem without revalidate
            notFound: true
        }
    }

    return {
        props: {
            response: body,
        },
        revalidate: 10,
    }
}

export default function Url() {
    return (
        <p>Hello world</p>
    )
}

이것은 결정적인 순간입니다.

// If page not exists return "Not found"
if (!body.status) {
    return {
        // This can be a problem without revalidate
        notFound: true,
    }
}

빌드 단계에서 페이지가 notFound를 반환하면 나중에 body.status가 true가 되더라도 페이지를 항상 찾을 수 없습니다.

이를 확인하고 Express를 사용하여 테스트 서버를 실행해 봅시다.

Express 서버용 프로젝트 생성

새 프로젝트를 만들고 Express를 설치합니다.

명령줄에서 다음을 실행합니다.

yarn add -D express @types/express nodemon ts-node typescript

package.json에 추가:

"main": "index.ts",
"scripts": {
  "start": "nodemon index.ts"
},

다음을 얻으려면:

{
  "main": "index.ts",
  "scripts": {
    "start": "nodemon index.ts"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "express": "^4.18.1",
    "nodemon": "^2.0.18",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.4"
  }
}

해당 프로젝트의 루트에서 파일 생성index.ts:

import express from 'express'

const app = express()
const port = 3001
app.get('/', (req, res) => {
    res.send({ status: false })
})

app.listen(port, () => {
    console.log(`⚡️[server]: listening on port ${port}`)
})

페이지에 대해 false 상태를 반환하고 있다는 점에 유의하십시오.

res.send({ status: false })

이제 서버를 실행합니다:

yarn start

오류를 재현하고 수정하십시오.

NextJS 프로젝트로 돌아가 터미널에서 실행해 보겠습니다.

yarn build

그런 다음 NextJS 서버를 실행합니다.

yarn start

페이지http://localhost:3000/test를 열면 404 페이지가 표시됩니다. 페이지를 새로고침해도 여전히 404 오류가 발생합니다. 이는 페이지가 빌드될 때 다음 줄의 서버에서 status: false를 받았기 때문입니다.

const response = await fetch('http://localhost:3001')

이제 서버가 true를 반환한다고 생각해 보십시오.

서버 프로젝트로 이동하여 status를 변경합니다.

res.send({ status: true })

서버가 재부팅되었는지 확인하십시오.

NextJS 프로젝트의 경우 다시 빌드하지 않고 페이지http://localhost:3000/test만 확인합니다. 아무것도 바뀌지 않습니다. 잠시만 더 새로 고침하십시오. 여전히 404가 있습니다.

이러한 동작을 수정하려면 파일revalidate: 5에 추가[url].tsx:

if (!body.status) {
    return {
        notFound: true,
        // We use 5 only for demonstration purpose
        revalidate: 5
    }
}

이제 페이지를 사용할 수 없었고 상태가 사용 가능으로 변경된 경우 페이지를 다시 작성할 수 있습니다. incremental static regeneration 이라고 합니다.

모든 것이 수정되었는지 확인하는 방법을 설명하겠습니다.

서버 프로젝트 반환에서:

res.send({ status: false })

서버가 재부팅되었는지 확인하십시오.

NextJS 프로젝트에서 yarn build 및 yarn start 명령을 실행합니다.

페이지http://localhost:3000/test로 이동하여 404 페이지를 반환하는지 확인합니다.

서버 프로젝트에서 상태 설정true:

res.send({ status: true })

서버가 재부팅되었는지 확인하십시오. 페이지 [ http://localhost:3000/test](http://localhost:3000/test 로 돌아가서 새로고침하면 404 페이지가 됩니다. 5초 동안 기다리면 NextJs가 재생성을 트리거합니다. 이제 페이지를 새로고침하면 사용할 수 있습니다.

이거 야! 읽어 주셔서 감사합니다.