next on netlify
v3.0.1
우리는 Netlify의 Essential Next.js 빌드 플러그인을 선호하여 next-on-netlify 더 이상 사용하지 않습니다. next-on-netlify 감가 상각에 대한 자세한 내용은이 문제를 방문하고 질문을하십시오. 플러그인으로 마이그레이션하는 지원을 위해 간단한 마이그레이션 문서를 방문 할 수도 있습니다.
next-on-netlify Netlify의 Next.js에서 서버 측 렌더링을 가능하게하는 유틸리티입니다. 애플리케이션은 작은 호환성 계층으로 래핑하여 페이지를 사용하여 서버 측면 렌더링 할 수 있도록합니다.
getStaticPaths 가있는 페이지의 폴백 npm install --save next-on-netlify
Serverless 앱으로 Next.js 앱을 빌드해야합니다. Serverless Next.js에 대한 자세한 내용은 여기를 참조하십시오.
매우 간단합니다. 프로젝트의 루트에서 next.config.js 파일을 작성하고 다음을 작성하십시오.
// next.config.js
module . exports = {
// Target must be serverless
target : "serverless" ,
} ;배포에 바이너리가 필요한 경우 다음 구성이 필요합니다 (Prisma는 예입니다).
// next.config.js
module . exports = {
// Target must be experimental-serverless-trace
// Your build time will be longer with this option
target : "experimental-serverless-trace" ,
} ; Next-On-Netlify 패키지는 next-on-netlify 명령을 추가합니다. 이 명령을 실행하면 NetLify*에서 호스팅하기 위해 다음.js 앱을 준비하는 마법이 발생합니다.
다음 Nextlify 명령이 다음에 다음.js 응용 프로그램을 작성한 후 실행되기를 원합니다. Package.json 파일에 게시 후 후크를 추가하겠습니다. 기존 스크립트에 "postbuild": "next-on-netlify" 추가해야합니다.
{
"name": "my-nextjs-app",
"scripts": {
"dev": "next",
"build": "next build",
"postbuild": "next-on-netlify"
},
...
}
*"마법"에 대해 궁금한 점이 있다면 잘 문서화 된 next-on-netlify.js 파일을 확인하십시오.
우리는 거의 끝났습니다! 우리는 NetLify에 다음에 다음.js 앱을 빌드하는 방법, 기능 폴더가있는 위치 및 CDN에 업로드 할 폴더를 알려야합니다. 프로젝트의 루트에있는 netlify.toml 파일과 다음 지침으로 다음을 수행합니다.
[ build ]
command = " npm run build "
functions = " out_functions "
publish = " out_publish " 참고 : out_functions and out_publish 다음에 네트리 정보로 하드 코딩됩니다. 이들은 현재 구성 할 수 없습니다.
프로젝트가 개인 하위 모듈이 포함되어 있으면 배치하려면 다음을 배포해야합니다.
NetLify에서 배포 키를 생성하고 배치 프로세스 중에 클로닝 할 수 있도록 관련 서브 모듈에 추가하십시오.
하위 모듈 리모컨이 ssh 형식으로 설정되어 있는지 확인하십시오 (예 : [email protected]:owner/project.git https://... ). 하위 모듈 디렉토리 내부에서 GIT 리모컨을 다음과 같이 업데이트 할 수 있습니다.
# git remote set-url [remote] [url]
git remote set-url origin [email protected]:owner/project.git우리는 끝났습니다. 배포합시다
NetLify에 익숙하지 않은 경우 여기에서 배포 지침을 따르십시오 : https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/
next dev 사용하여 신청서를 로컬로 빌드하고 미리 볼 것을 권장합니다.
그러나 컴퓨터에서 NetLify 배포를 모방하려면 next-on-netlify 실행 한 다음 netlify-cli 사용하여 결과를 미리 볼 수 있습니다.
먼저 최신 버전의 netlify-cli 설치하십시오 (Package.json을보고 다음 네트 리플이 테스트 한 버전을 볼 수도 있습니다).
npm install -g netlify-cli 그런 다음 다음 [dev] 블록을 netlify.toml 에 추가하십시오.
# netlify.toml
# [build]
# ...
[ dev ]
functions = " out_functions "
publish = " out_publish "
# We manually set the framework to static, otherwise Netlify automatically
# detects Next.js and redirects do not work.
# Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
framework = " #static " 마지막으로 .gitignore 에 다음 줄을 추가하십시오.
# .gitignore
# Files generated by next-on-netlify command
/out_publish/
/out_functions/이제 당신은 모두 설정되었습니다.
이제부터 신청서를 로컬로 미리보기를 원할 때마다 실행하십시오.
npx next-on-netlify watch : Next.js 앱을 빌드하고 Netlify와의 호환성을 위해 Next.js 앱을 준비하기 위해 next-on-netlify next build 실행합니다. 모든 소스 코드 변경은 다른 빌드를 트리거합니다.netlify dev : 컴퓨터에서 NetLify를 모방하고 http://localhost:8888 에서 앱을 미리 볼 수 있습니다.메모:
미리보기 모드는 아직 로컬로 사용할 수 없으며 netlify dev 페이지를 실행하여 정적 페이지를 실행하십시오. 이것은 곧 지원 될 것입니다.
현재 모든 Next.js 페이지 유형의 프로덕션에서 미리보기 모드가 지원 됩니다 .
_redirects 및/또는 netlify.toml 파일에서 사용자 정의 리디렉션을 정의 할 수 있습니다. 이 규칙의 우선 순위는 다음과 같습니다.
_redirectsnext-on-netlify 리디렉션 현재 netlify.toml 파일에 설정된 리디렉션에 대한 지원은 없습니다.
NetLify 리디렉션에 대해 자세히 알아보십시오.
next-on-netlify 각 SSR 페이지 및 API 엔드 포인트에 대해 하나의 NetLify 함수를 만듭니다. 현재 @netlify/plugin-nextjs를 사용하여 사용자 정의 netlify 함수 만 만들 수 있습니다.
다음 .js API 페이지/루트가 -background 에서 종료되면 NetLify 배경 기능으로 취급됩니다. 참고 : 배경 기능은 특정 계획에서만 사용할 수 있습니다.
Netlify Identity를 next-on-netlify 와 함께 사용할 수 있습니다. 서버 측 렌더링 (GetInitialProps*, GetServersideProps 및 API 경로)이있는 모든 페이지의 경우 req 매개 변수를 통해 ClientContext 객체에 액세스 할 수 있습니다.
예를 들어:
const Page = ( ) => < p > Hello World! </ p > ;
export const getServerSideProps = async ( { req } ) => {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { identity , user } = context . clientContext ;
return {
props : { } ,
} ;
} ;
export default Page ;서버 측 렌더링이없는 페이지에서 Netlify Identity에 액세스하려면 Identity 관련 논리를 수행하는 다음 API 경로를 만들 수 있습니다.
export default async function getUser ( req , res ) {
// Get event and context from Netlify Function
const {
netlifyFunctionParams : { event , context } ,
} = req ;
// Access Netlify identity
const { user } = context . clientContext ;
// Respond with user object
res . json ( { user } ) ;
}* GetInitialProps를 사용하는 페이지는 사용자가 페이지간에 클라이언트 측을 탐색 할 때가 아니라 초기 페이지로드에서 서버 측만 렌더링됩니다.
getStaticPaths 가있는 페이지의 폴백 폴백 페이지는 next-on-netlify 와 Next.js와는 다르게 행동합니다. 다음 .js에서는 getStaticPaths 에 정의되지 않은 경로로 탐색 할 때 먼저 폴백 페이지가 표시됩니다. 그런 다음 JS는 백그라운드에서 HTML을 생성하고 향후 요청을 위해 캐시합니다.
next-on-netlify 사용하면 getStaticPaths 에 정의되지 않은 경로로 탐색 할 때 IT 서버 측면은 페이지를 렌더링하고 사용자에게 직접 보냅니다. 사용자는 폴백 페이지를 보지 못합니다. 향후 요청을 위해 페이지가 캐시되지 않습니다.
이에 대한 자세한 내용은 다음을 참조하십시오. 문제 #7
다음/이미지를위한 기존 솔루션은 그다지 성능이 없습니다. 내부 작업에 따라 로드맵에서 성능이 향상되었습니다.
이제 더 나은 성능을 얻으려면 Cloudinary와 같은 클라우드 제공 업체를 사용하는 것이 좋습니다 (Next.js Docs 참조).
이 패키지는 Lindsay Levine, Finn Woelm 및 Cassidy Williams에 의해 유지됩니다.
@mottox2 (netlify에서 next.js를 호스팅하는 선구자)와 @danielcondemarin (AWS 용 Serverless-next.js의 저자)에게 소리를 지르십시오. 두 사람은이 패키지에 큰 영감을주었습니다.
? 기여, 지원 및 베타 테스트에 대해 다음 사람들에게 큰 "감사합니다".
다음 사이트는 next-on-netlify 제공합니다.
OpinionatedReact.com (트위터를 통해)
missionbit.org (#18)
gemini.com
bigbinary.com
나만의 블로그를 만들고 NetLify에 배포하십시오!
next-on-netlify 위해 멋진 것을 만들고 있습니까? 알려 주시면 여기에 기능을하겠습니다 :)
