React에서 HTML 파일을 렌더링하는 4단계
1983 단어 webdevjavascriptreactprogramming
01
저는 Next.js 리포지토리를 사용하고 있으므로 처음 사용하는 경우 이를 설치해야 합니다.
https://medium.com/nerd-for-tech/you-really-need-to-migrate-to-next-js-ee646a9982ab
02
저장소가 설치되면 서버리스 기능(신규인 경우)을 처리하고 서버리스 기능에 다음 코드를 추가합니다.
저는 응답으로 HTML 파일을 반환할 페이지/api 디렉토리 내에 샘플 hello API를 생성하고 있습니다.
import fs from "fs";
const filename = "/portfolio/index.html";
module.exports = async(req, res) => {
res.setHeader("Content-Type", "text/html, charset=utf-9");
res.write(await fs.readFileSync(filename, "utf-8"));
res.end();
};
03
HTML 파일 추가는 세 번째 단계입니다.
루트 디렉토리의 페이지 디렉토리는 next.js 리포지토리의 모든 정적 파일 위치입니다.
profile.html 파일에 HTML 코드를 추가합니다.
<html>
<head>
<title>Example</title>
</head>
<body>
<p>This is an example of a simple HTML page with one paragraph.</p>
</body>
</html>
--
04
이것은 중요한 단계입니다. 이제 index.html 파일 내에서 HTML 코드를 렌더링하고 api/profile 페이지에서 반환하도록 next.js에 지시할 것입니다.
사용자가 프로필 페이지를 열면 api/profileendpoint는 웹사이트에서 프로필 HTML 파일을 렌더링하라는 요청을 받습니다.
프록시 URL 개념을 사용하여 요청을 구성하도록 next.js에 지시하고 루트 디렉토리의 next.config.js 파일에 다음 코드를 추가하면 됩니다.
module.exports = () => {
rewrites: async () => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
이제 profile.html 경로는 단순히 HTML 파일을 렌더링합니다.
05
오늘은 여기까지입니다. 다음 시간까지 좋은 하루 되세요.
우리 웹사이트 iHateReading
Reference
이 문제에 관하여(React에서 HTML 파일을 렌더링하는 4단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/shreyvijayvargiya/4-steps-to-render-html-file-in-react-38h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
