Webflow 및 Next 통합js
⚠️ 업데이트: 지금 발표되었습니다DesignSync.js!다음.Webflow 웹 사이트의 js 템플릿을 가져옵니다.또한 Webflow 상호 작용과 애니메이션을 지원하는 이미지를 최적화합니다.그러니 다음 아름다운 건물의 지름길을 당장 찾고 싶다면 가보시오.js 사이트!
개술
Webflow 디자이너에게는 아주 좋은 무코드 사이트 건설자입니다.작은 용례에 적합하지만 확장을 시도할 때 가끔 괴벽이 있을 수 있습니다.
이익.
Webflow를 Next와 결합합니다.js, 우리는 기본적으로 쌍방이 모두 좋게 한다.디자이너는 웹플로우의 디자인을 완전히 제어할 수 있다.개발자는 Next의 코드를 완전히 제어할 수 있습니다.js.개발자는 다음 단계에서 그들이 필요로 할 수 있는 모든 페이지를 만들 수 있다.js는 응용 프로그램 관련 기능이나 웹 사이트에서 온 페이지 코드에 구성 요소를 삽입하는 데 사용됩니다.
이것도 여러 개의 출처 내용을 포함하는 혼합 사이트에 적용된다.디자이너는 여전히 웹플로우에서, 개발자는Next에서fetch WordPress, Shopify, or API data 같은 작업을 할 수 있다.js는 내용을 Webflow 템플릿에 연결합니다.
이 두 서비스는 소형 용례에 대해 모두 무료이다.그래서 만약 당신의 수요가 매우 적다면 당신은 매우 강력한 사이트를 가지고 추가 비용을 필요로 하지 않을 수 있다.
마지막으로 우리는 일부 조정을 통해 더욱 좋은 성능과 검색엔진 최적화를 얻을 수 있다.우리 잠시 후에 다시 이야기합시다.
결점
지금까지 내가 발견한 유일한 진정한 단점은 웹플로우의 JS가 후속 내비게이션에 사용할 수 없다는 것이다.그래서 상호작용과 애니메이션이 계속 유효하지 않을 수도 있다.
이것은 React에서 일하는 자신의 JS를 추가해서 해결할 수도 있고, 상호작용을 완전히 피하고 라이브러리를 사용해서 이런 일을 처리할 수도 있습니다.
Webflow 컨텐트를 다음으로 끌어 넣습니다.js
다음에 본 강좌는 당신이 Node.js에 대해 알고 있다고 가정할 것입니다.js와 웹플로우.나는 Yarn를 패키지 관리자로 사용하지만 npm도 가능하다.
만약 네가 아직 없다면 먼저 네 컴퓨터에 있어create a Next.js app.만약 네가 아직 Webflow 사이트가 없다면, 하나를 만들 수도 있다.
우선 다음 것을 찾아보자.js 프로젝트의 홈페이지는 웹플로우 홈페이지처럼 보입니다.이를 위해서는 Webflow 컨텐트를 가져와야 합니다.우리는 Axios로 이 점을 실현할 수 있다.노드가 있는 HTML을 분석하려면 Cheerio 라는 라이브러리가 필요합니다.
다음을 설치하겠습니다.
yarn add axios
yarn add cheerio
먼저 컨텐트를 렌더링합니다.pages/index.js 파일을 열고 내용을 다음과 같이 바꿉니다.
// ./pages/index.js
export default function Home(props) {
return <div dangerouslySetInnerHTML={{ __html: props.bodyContent }} />
}
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Fetch HTML
let res = await axios(process.env.WEBFLOW_URL).catch((err) => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
},
}
}
Webflow URL은 환경 변수로 참조됩니다.로컬 환경에 추가하려면 프로젝트 루트에 .env.local라는 파일을 만들고 다음을 추가합니다.
# Replace the URL with your own Webflow site; no trailing slash
WEBFLOW_URL = "https://business-starter-template.webflow.io"
현재 yarn dev 를 실행하면 내용을 볼 수 있지만, 많은 스타일이 존재하지 않습니다.이것은 우리가 <head> 내용을 불러오지 않았기 때문이다<body>.
Webflow 컨텐트 구문 분석
우리는 리액트dangerouslySetInnerHTML로 신체 내용물을 부을 수 있다.그러나 이것은 <head> 내용에 작용하지 않는다.HTML 문자열을 JSX가 이해할 수 있는 내용으로 변환해야 합니다.이를 위해 html-react-parser 모듈을 사용할 수 있습니다.
yarn add html-react-parser
저희가 Cheerio로 캡처<body>한 곳에서도 <head>한 내용을 받아서 아이템으로 보냅니다.
// ./pages/index.js
...
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
그리고 저희 구성 요소에서 <head> 내용을 해석하여 JSX로 변환한 다음 next/head를 사용하여 문서에 추가할 수 있습니다.
// ./pages/index.js
import Head from 'next/head'
import parseHtml from 'html-react-parser'
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
<div dangerouslySetInnerHTML={{__html: props.bodyContent}} />
</>
)
}
...
이제 다음 페이지에서 웹플로우 사이트의 스타일 페이지를 볼 수 있을 것입니다.js 응용 프로그램.기본 pages/_app.js 파일을 삭제해야 할 수도 있습니다. 전역 스타일시트를 가져올 수도 있고, 이 스타일시트는 웹플로우 스타일시트와 충돌할 수도 있습니다.
경로
이 점에서 다음.js는 웹플로우가 할 수 없는 페이지에 대해 아무것도 하지 않습니다.우리는 기본적으로 웹 플로우 페이지를 원형대로 표시할 뿐이다.넥스트의 장점 중 하나는js는 클라이언트 루트입니다. 내부 내비게이션과 관련이 있을 때, 웹 사이트 응용 프로그램에 비슷한 속도를 가져다 줄 수 있습니다.다음 단계에 그것을 추가합시다.js/Webflow 프로젝트.
색인 파일에 우리가 원하는 논리를 가지고 있기 때문에 다시 사용할 수 있습니다.그러나 다음 단계를 알려주기 위해서는 getStaticPaths 함수가 필요하다.js의 모든 가능한 경로입니다.Web915 모듈을 사용하면 이러한 웹 사이트에서 경로를 확인할 수 있습니다.설치를 시작하겠습니다.
yarn add sitemap-links
현재, 우리는 모든 다른 경로를 포착하기 위해 동적 경로를 추가해야 한다.이렇게 하면 우리는 홈페이지뿐만 아니라 모든 웹플로우 페이지를 보여줄 수 있다.우리는 pages 디렉터리에 [...path].js라는 파일을 추가해서 이를 실현할 수 있다.
// ./pages/[...path].js
import GetSitemapLinks from 'sitemap-links'
import DynamicPath, { getStaticProps } from './index'
export default DynamicPath
export { getStaticProps }
export async function getStaticPaths() {
// Fetch links from Webflow sitemap
const sitemapLink = process.env.WEBFLOW_URL + `/sitemap.xml`
const links = await GetSitemapLinks(sitemapLink).catch((err) => {
console.error(err)
})
// Extract paths from absolute links
const paths = []
for (let link of links) {
let url = new URL(link)
const path = url.pathname.replace(`/`, ``).split(`/`)
if (!path.length || !path[0]) continue
paths.push({
params: { path },
})
}
return {
paths: paths,
fallback: `blocking`,
}
}
이제 일반적인 HTML 링크를 분석하고 Next로 변환하기 위해 index.js의 구성 요소에 추가 논리를 추가합니다.js 링크.
// ./pages/index.js
import Head from 'next/head'
import Link from 'next/link'
import parseHtml, { domToReact } from 'html-react-parser'
import get from 'lodash/get'
// Determines if URL is internal or external
function isUrlInternal(link){
if(
!link ||
link.indexOf(`https:`) === 0 ||
link.indexOf(`#`) === 0 ||
link.indexOf(`http`) === 0 ||
link.indexOf(`://`) === 0
){
return false
}
return true
}
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
}
const parseOptions = { replace }
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
{parseHtml(props.bodyContent, parseOptions)}
</>
)
}
...
이것은 보기에는 많은 것 같지만, 기본적으로 어떤 <a> 링크를 찾아서 다음 링크로 바꾸는 해석 옵션만 추가합니다.js<Link>.
URL 경로에 따라 웹 페이지만 가져오는 것이 아니라 웹 페이지를 가져오는 함수를 변경해야 합니다.
// ./pages/index.js
...
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Use path to determine Webflow path
let url = get(ctx, `params.path`, [])
url = url.join(`/`)
if(url.charAt(0) !== `/`){
url = `/${url}`
}
const fetchUrl = process.env.WEBFLOW_URL + url
// Fetch HTML
let res = await axios(fetchUrl)
.catch(err => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
}
이제 니 다음.js 프로그램은 모든 웹플로우를 다음 링크로 해석하고 변환할 수 있습니다.js 링크는 일반적인 웹플로우 사이트보다 페이지를 더 빨리 변환하고 보여야 합니다.
사이트 맵 링크
고정 글꼴
단점 부분에서 언급한 바와 같이 일부 JS는 작용하지 않는다.만약 당신의 템플릿이 구글 글꼴을 사용한다면 이것은 문제입니다.그렇다면 Google Fonts가 작은 JavaScript 세션을 사용하여 시작하기 때문에 제대로 로드되지 않았을 수도 있습니다.
이를 위해 getStaticProps 파일에서 웹폰트를 변환하면 웹폰트를 약간 늦출 수 있습니다.
// ./pages/index.js
...
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
// Make Google Fonts scripts work
if(node.name === `script`){
let content = get(node, `children.0.data`, ``)
if(content && content.trim().indexOf(`WebFont.load(`) === 0){
content = `setTimeout(function(){${content}}, 1)`
return (
<script {...attribs} dangerouslySetInnerHTML={{__html: content}}></script>
)
}
}
}
...
나는 이것이 왜 효과가 있는지 완전히 확실하지는 않지만, 확실히 효과가 있다.더 우아한 해결 방안이 있다면 댓글로 알려주세요.
자동 통합
통합이 자동화되지 않는 한 ADI는 그렇지 않을 것이다.우리가 진정으로 원하는 것은 다음이다.웹플로우 디자인이 바뀔 때마다 js 사이트는 자동으로 업데이트됩니다.
와 Netlify는 모두 넥스트의 절호의 주최국이다.js 사이트.이 자습서에서는 Vercel을 사용하여 다음 코스를 진행합니다.js 프로젝트.아직 없으면Vercelpages/index.js를 꼬리 슬래시가 없는 Webflow 사이트 URL로 설정해야 합니다.
Vercel 대시보드deploy your Next.js project to Vercel에서이 URL을 복사합니다.
그리고 웹플로우 사이트의 대시보드you can create a deploy hook in the "git" section에 있습니다.트리거 유형으로 Site publish 를 선택하고 Vercel에서 가져온 URL을 Webhook URL로 붙여 넣습니다.
Webflow 사이트가 변경 내용을 게시할 때마다 다음 변경 내용을 다시 생성하기 위해 Vercel에 알림을 보냅니다.js 프로젝트.
통합 탭에서 Webhook URL 만들기
한층 더
. 이것은 단지 이런 집적의 기본적인 실현일 뿐이다.우리가 어떻게 진일보한 행동을 취할 것인가에 대해 나는 몇 가지 생각이 있다.
지금까지 내가 발견한 유일한 진정한 단점은 웹플로우의 JS가 후속 내비게이션에 사용할 수 없다는 것이다.그래서 상호작용과 애니메이션이 계속 유효하지 않을 수도 있다.
이것은 React에서 일하는 자신의 JS를 추가해서 해결할 수도 있고, 상호작용을 완전히 피하고 라이브러리를 사용해서 이런 일을 처리할 수도 있습니다.
Webflow 컨텐트를 다음으로 끌어 넣습니다.js
다음에 본 강좌는 당신이 Node.js에 대해 알고 있다고 가정할 것입니다.js와 웹플로우.나는 Yarn를 패키지 관리자로 사용하지만 npm도 가능하다.
만약 네가 아직 없다면 먼저 네 컴퓨터에 있어create a Next.js app.만약 네가 아직 Webflow 사이트가 없다면, 하나를 만들 수도 있다.
우선 다음 것을 찾아보자.js 프로젝트의 홈페이지는 웹플로우 홈페이지처럼 보입니다.이를 위해서는 Webflow 컨텐트를 가져와야 합니다.우리는 Axios로 이 점을 실현할 수 있다.노드가 있는 HTML을 분석하려면 Cheerio 라는 라이브러리가 필요합니다.
다음을 설치하겠습니다.
yarn add axios
yarn add cheerio
먼저 컨텐트를 렌더링합니다.pages/index.js 파일을 열고 내용을 다음과 같이 바꿉니다.
// ./pages/index.js
export default function Home(props) {
return <div dangerouslySetInnerHTML={{ __html: props.bodyContent }} />
}
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Fetch HTML
let res = await axios(process.env.WEBFLOW_URL).catch((err) => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
},
}
}
Webflow URL은 환경 변수로 참조됩니다.로컬 환경에 추가하려면 프로젝트 루트에 .env.local라는 파일을 만들고 다음을 추가합니다.
# Replace the URL with your own Webflow site; no trailing slash
WEBFLOW_URL = "https://business-starter-template.webflow.io"
현재 yarn dev 를 실행하면 내용을 볼 수 있지만, 많은 스타일이 존재하지 않습니다.이것은 우리가 <head> 내용을 불러오지 않았기 때문이다<body>.
Webflow 컨텐트 구문 분석
우리는 리액트dangerouslySetInnerHTML로 신체 내용물을 부을 수 있다.그러나 이것은 <head> 내용에 작용하지 않는다.HTML 문자열을 JSX가 이해할 수 있는 내용으로 변환해야 합니다.이를 위해 html-react-parser 모듈을 사용할 수 있습니다.
yarn add html-react-parser
저희가 Cheerio로 캡처<body>한 곳에서도 <head>한 내용을 받아서 아이템으로 보냅니다.
// ./pages/index.js
...
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
그리고 저희 구성 요소에서 <head> 내용을 해석하여 JSX로 변환한 다음 next/head를 사용하여 문서에 추가할 수 있습니다.
// ./pages/index.js
import Head from 'next/head'
import parseHtml from 'html-react-parser'
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
<div dangerouslySetInnerHTML={{__html: props.bodyContent}} />
</>
)
}
...
이제 다음 페이지에서 웹플로우 사이트의 스타일 페이지를 볼 수 있을 것입니다.js 응용 프로그램.기본 pages/_app.js 파일을 삭제해야 할 수도 있습니다. 전역 스타일시트를 가져올 수도 있고, 이 스타일시트는 웹플로우 스타일시트와 충돌할 수도 있습니다.
경로
이 점에서 다음.js는 웹플로우가 할 수 없는 페이지에 대해 아무것도 하지 않습니다.우리는 기본적으로 웹 플로우 페이지를 원형대로 표시할 뿐이다.넥스트의 장점 중 하나는js는 클라이언트 루트입니다. 내부 내비게이션과 관련이 있을 때, 웹 사이트 응용 프로그램에 비슷한 속도를 가져다 줄 수 있습니다.다음 단계에 그것을 추가합시다.js/Webflow 프로젝트.
색인 파일에 우리가 원하는 논리를 가지고 있기 때문에 다시 사용할 수 있습니다.그러나 다음 단계를 알려주기 위해서는 getStaticPaths 함수가 필요하다.js의 모든 가능한 경로입니다.Web915 모듈을 사용하면 이러한 웹 사이트에서 경로를 확인할 수 있습니다.설치를 시작하겠습니다.
yarn add sitemap-links
현재, 우리는 모든 다른 경로를 포착하기 위해 동적 경로를 추가해야 한다.이렇게 하면 우리는 홈페이지뿐만 아니라 모든 웹플로우 페이지를 보여줄 수 있다.우리는 pages 디렉터리에 [...path].js라는 파일을 추가해서 이를 실현할 수 있다.
// ./pages/[...path].js
import GetSitemapLinks from 'sitemap-links'
import DynamicPath, { getStaticProps } from './index'
export default DynamicPath
export { getStaticProps }
export async function getStaticPaths() {
// Fetch links from Webflow sitemap
const sitemapLink = process.env.WEBFLOW_URL + `/sitemap.xml`
const links = await GetSitemapLinks(sitemapLink).catch((err) => {
console.error(err)
})
// Extract paths from absolute links
const paths = []
for (let link of links) {
let url = new URL(link)
const path = url.pathname.replace(`/`, ``).split(`/`)
if (!path.length || !path[0]) continue
paths.push({
params: { path },
})
}
return {
paths: paths,
fallback: `blocking`,
}
}
이제 일반적인 HTML 링크를 분석하고 Next로 변환하기 위해 index.js의 구성 요소에 추가 논리를 추가합니다.js 링크.
// ./pages/index.js
import Head from 'next/head'
import Link from 'next/link'
import parseHtml, { domToReact } from 'html-react-parser'
import get from 'lodash/get'
// Determines if URL is internal or external
function isUrlInternal(link){
if(
!link ||
link.indexOf(`https:`) === 0 ||
link.indexOf(`#`) === 0 ||
link.indexOf(`http`) === 0 ||
link.indexOf(`://`) === 0
){
return false
}
return true
}
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
}
const parseOptions = { replace }
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
{parseHtml(props.bodyContent, parseOptions)}
</>
)
}
...
이것은 보기에는 많은 것 같지만, 기본적으로 어떤 <a> 링크를 찾아서 다음 링크로 바꾸는 해석 옵션만 추가합니다.js<Link>.
URL 경로에 따라 웹 페이지만 가져오는 것이 아니라 웹 페이지를 가져오는 함수를 변경해야 합니다.
// ./pages/index.js
...
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Use path to determine Webflow path
let url = get(ctx, `params.path`, [])
url = url.join(`/`)
if(url.charAt(0) !== `/`){
url = `/${url}`
}
const fetchUrl = process.env.WEBFLOW_URL + url
// Fetch HTML
let res = await axios(fetchUrl)
.catch(err => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
}
이제 니 다음.js 프로그램은 모든 웹플로우를 다음 링크로 해석하고 변환할 수 있습니다.js 링크는 일반적인 웹플로우 사이트보다 페이지를 더 빨리 변환하고 보여야 합니다.
사이트 맵 링크
고정 글꼴
단점 부분에서 언급한 바와 같이 일부 JS는 작용하지 않는다.만약 당신의 템플릿이 구글 글꼴을 사용한다면 이것은 문제입니다.그렇다면 Google Fonts가 작은 JavaScript 세션을 사용하여 시작하기 때문에 제대로 로드되지 않았을 수도 있습니다.
이를 위해 getStaticProps 파일에서 웹폰트를 변환하면 웹폰트를 약간 늦출 수 있습니다.
// ./pages/index.js
...
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
// Make Google Fonts scripts work
if(node.name === `script`){
let content = get(node, `children.0.data`, ``)
if(content && content.trim().indexOf(`WebFont.load(`) === 0){
content = `setTimeout(function(){${content}}, 1)`
return (
<script {...attribs} dangerouslySetInnerHTML={{__html: content}}></script>
)
}
}
}
...
나는 이것이 왜 효과가 있는지 완전히 확실하지는 않지만, 확실히 효과가 있다.더 우아한 해결 방안이 있다면 댓글로 알려주세요.
자동 통합
통합이 자동화되지 않는 한 ADI는 그렇지 않을 것이다.우리가 진정으로 원하는 것은 다음이다.웹플로우 디자인이 바뀔 때마다 js 사이트는 자동으로 업데이트됩니다.
와 Netlify는 모두 넥스트의 절호의 주최국이다.js 사이트.이 자습서에서는 Vercel을 사용하여 다음 코스를 진행합니다.js 프로젝트.아직 없으면Vercelpages/index.js를 꼬리 슬래시가 없는 Webflow 사이트 URL로 설정해야 합니다.
Vercel 대시보드deploy your Next.js project to Vercel에서이 URL을 복사합니다.
그리고 웹플로우 사이트의 대시보드you can create a deploy hook in the "git" section에 있습니다.트리거 유형으로 Site publish 를 선택하고 Vercel에서 가져온 URL을 Webhook URL로 붙여 넣습니다.
Webflow 사이트가 변경 내용을 게시할 때마다 다음 변경 내용을 다시 생성하기 위해 Vercel에 알림을 보냅니다.js 프로젝트.
통합 탭에서 Webhook URL 만들기
한층 더
. 이것은 단지 이런 집적의 기본적인 실현일 뿐이다.우리가 어떻게 진일보한 행동을 취할 것인가에 대해 나는 몇 가지 생각이 있다.
yarn add axios
yarn add cheerio
// ./pages/index.js
export default function Home(props) {
return <div dangerouslySetInnerHTML={{ __html: props.bodyContent }} />
}
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Fetch HTML
let res = await axios(process.env.WEBFLOW_URL).catch((err) => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
},
}
}
# Replace the URL with your own Webflow site; no trailing slash
WEBFLOW_URL = "https://business-starter-template.webflow.io"
우리는 리액트dangerouslySetInnerHTML로 신체 내용물을 부을 수 있다.그러나 이것은
<head> 내용에 작용하지 않는다.HTML 문자열을 JSX가 이해할 수 있는 내용으로 변환해야 합니다.이를 위해 html-react-parser 모듈을 사용할 수 있습니다.yarn add html-react-parser
<body>한 곳에서도 <head>한 내용을 받아서 아이템으로 보냅니다.// ./pages/index.js
...
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
<head> 내용을 해석하여 JSX로 변환한 다음 next/head를 사용하여 문서에 추가할 수 있습니다.// ./pages/index.js
import Head from 'next/head'
import parseHtml from 'html-react-parser'
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
<div dangerouslySetInnerHTML={{__html: props.bodyContent}} />
</>
)
}
...
pages/_app.js 파일을 삭제해야 할 수도 있습니다. 전역 스타일시트를 가져올 수도 있고, 이 스타일시트는 웹플로우 스타일시트와 충돌할 수도 있습니다.경로
이 점에서 다음.js는 웹플로우가 할 수 없는 페이지에 대해 아무것도 하지 않습니다.우리는 기본적으로 웹 플로우 페이지를 원형대로 표시할 뿐이다.넥스트의 장점 중 하나는js는 클라이언트 루트입니다. 내부 내비게이션과 관련이 있을 때, 웹 사이트 응용 프로그램에 비슷한 속도를 가져다 줄 수 있습니다.다음 단계에 그것을 추가합시다.js/Webflow 프로젝트.
색인 파일에 우리가 원하는 논리를 가지고 있기 때문에 다시 사용할 수 있습니다.그러나 다음 단계를 알려주기 위해서는 getStaticPaths 함수가 필요하다.js의 모든 가능한 경로입니다.Web915 모듈을 사용하면 이러한 웹 사이트에서 경로를 확인할 수 있습니다.설치를 시작하겠습니다.
yarn add sitemap-links
현재, 우리는 모든 다른 경로를 포착하기 위해 동적 경로를 추가해야 한다.이렇게 하면 우리는 홈페이지뿐만 아니라 모든 웹플로우 페이지를 보여줄 수 있다.우리는 pages 디렉터리에 [...path].js라는 파일을 추가해서 이를 실현할 수 있다.
// ./pages/[...path].js
import GetSitemapLinks from 'sitemap-links'
import DynamicPath, { getStaticProps } from './index'
export default DynamicPath
export { getStaticProps }
export async function getStaticPaths() {
// Fetch links from Webflow sitemap
const sitemapLink = process.env.WEBFLOW_URL + `/sitemap.xml`
const links = await GetSitemapLinks(sitemapLink).catch((err) => {
console.error(err)
})
// Extract paths from absolute links
const paths = []
for (let link of links) {
let url = new URL(link)
const path = url.pathname.replace(`/`, ``).split(`/`)
if (!path.length || !path[0]) continue
paths.push({
params: { path },
})
}
return {
paths: paths,
fallback: `blocking`,
}
}
이제 일반적인 HTML 링크를 분석하고 Next로 변환하기 위해 index.js의 구성 요소에 추가 논리를 추가합니다.js 링크.
// ./pages/index.js
import Head from 'next/head'
import Link from 'next/link'
import parseHtml, { domToReact } from 'html-react-parser'
import get from 'lodash/get'
// Determines if URL is internal or external
function isUrlInternal(link){
if(
!link ||
link.indexOf(`https:`) === 0 ||
link.indexOf(`#`) === 0 ||
link.indexOf(`http`) === 0 ||
link.indexOf(`://`) === 0
){
return false
}
return true
}
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
}
const parseOptions = { replace }
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
{parseHtml(props.bodyContent, parseOptions)}
</>
)
}
...
이것은 보기에는 많은 것 같지만, 기본적으로 어떤 <a> 링크를 찾아서 다음 링크로 바꾸는 해석 옵션만 추가합니다.js<Link>.
URL 경로에 따라 웹 페이지만 가져오는 것이 아니라 웹 페이지를 가져오는 함수를 변경해야 합니다.
// ./pages/index.js
...
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Use path to determine Webflow path
let url = get(ctx, `params.path`, [])
url = url.join(`/`)
if(url.charAt(0) !== `/`){
url = `/${url}`
}
const fetchUrl = process.env.WEBFLOW_URL + url
// Fetch HTML
let res = await axios(fetchUrl)
.catch(err => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
}
이제 니 다음.js 프로그램은 모든 웹플로우를 다음 링크로 해석하고 변환할 수 있습니다.js 링크는 일반적인 웹플로우 사이트보다 페이지를 더 빨리 변환하고 보여야 합니다.
사이트 맵 링크
고정 글꼴
단점 부분에서 언급한 바와 같이 일부 JS는 작용하지 않는다.만약 당신의 템플릿이 구글 글꼴을 사용한다면 이것은 문제입니다.그렇다면 Google Fonts가 작은 JavaScript 세션을 사용하여 시작하기 때문에 제대로 로드되지 않았을 수도 있습니다.
이를 위해 getStaticProps 파일에서 웹폰트를 변환하면 웹폰트를 약간 늦출 수 있습니다.
// ./pages/index.js
...
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
// Make Google Fonts scripts work
if(node.name === `script`){
let content = get(node, `children.0.data`, ``)
if(content && content.trim().indexOf(`WebFont.load(`) === 0){
content = `setTimeout(function(){${content}}, 1)`
return (
<script {...attribs} dangerouslySetInnerHTML={{__html: content}}></script>
)
}
}
}
...
나는 이것이 왜 효과가 있는지 완전히 확실하지는 않지만, 확실히 효과가 있다.더 우아한 해결 방안이 있다면 댓글로 알려주세요.
자동 통합
통합이 자동화되지 않는 한 ADI는 그렇지 않을 것이다.우리가 진정으로 원하는 것은 다음이다.웹플로우 디자인이 바뀔 때마다 js 사이트는 자동으로 업데이트됩니다.
와 Netlify는 모두 넥스트의 절호의 주최국이다.js 사이트.이 자습서에서는 Vercel을 사용하여 다음 코스를 진행합니다.js 프로젝트.아직 없으면Vercelpages/index.js를 꼬리 슬래시가 없는 Webflow 사이트 URL로 설정해야 합니다.
Vercel 대시보드deploy your Next.js project to Vercel에서이 URL을 복사합니다.
그리고 웹플로우 사이트의 대시보드you can create a deploy hook in the "git" section에 있습니다.트리거 유형으로 Site publish 를 선택하고 Vercel에서 가져온 URL을 Webhook URL로 붙여 넣습니다.
Webflow 사이트가 변경 내용을 게시할 때마다 다음 변경 내용을 다시 생성하기 위해 Vercel에 알림을 보냅니다.js 프로젝트.
통합 탭에서 Webhook URL 만들기
한층 더
. 이것은 단지 이런 집적의 기본적인 실현일 뿐이다.우리가 어떻게 진일보한 행동을 취할 것인가에 대해 나는 몇 가지 생각이 있다.
yarn add sitemap-links
// ./pages/[...path].js
import GetSitemapLinks from 'sitemap-links'
import DynamicPath, { getStaticProps } from './index'
export default DynamicPath
export { getStaticProps }
export async function getStaticPaths() {
// Fetch links from Webflow sitemap
const sitemapLink = process.env.WEBFLOW_URL + `/sitemap.xml`
const links = await GetSitemapLinks(sitemapLink).catch((err) => {
console.error(err)
})
// Extract paths from absolute links
const paths = []
for (let link of links) {
let url = new URL(link)
const path = url.pathname.replace(`/`, ``).split(`/`)
if (!path.length || !path[0]) continue
paths.push({
params: { path },
})
}
return {
paths: paths,
fallback: `blocking`,
}
}
// ./pages/index.js
import Head from 'next/head'
import Link from 'next/link'
import parseHtml, { domToReact } from 'html-react-parser'
import get from 'lodash/get'
// Determines if URL is internal or external
function isUrlInternal(link){
if(
!link ||
link.indexOf(`https:`) === 0 ||
link.indexOf(`#`) === 0 ||
link.indexOf(`http`) === 0 ||
link.indexOf(`://`) === 0
){
return false
}
return true
}
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
}
const parseOptions = { replace }
export default function Home(props) {
return (
<>
<Head>
{parseHtml(props.headContent)}
</Head>
{parseHtml(props.bodyContent, parseOptions)}
</>
)
}
...
// ./pages/index.js
...
export async function getStaticProps(ctx) {
// Import modules in here that aren't needed in the component
const cheerio = await import(`cheerio`)
const axios = (await import(`axios`)).default
// Use path to determine Webflow path
let url = get(ctx, `params.path`, [])
url = url.join(`/`)
if(url.charAt(0) !== `/`){
url = `/${url}`
}
const fetchUrl = process.env.WEBFLOW_URL + url
// Fetch HTML
let res = await axios(fetchUrl)
.catch(err => {
console.error(err)
})
const html = res.data
// Parse HTML with Cheerio
const $ = cheerio.load(html)
const bodyContent = $(`body`).html()
const headContent = $(`head`).html()
// Send HTML to component via props
return {
props: {
bodyContent,
headContent
},
}
}
단점 부분에서 언급한 바와 같이 일부 JS는 작용하지 않는다.만약 당신의 템플릿이 구글 글꼴을 사용한다면 이것은 문제입니다.그렇다면 Google Fonts가 작은 JavaScript 세션을 사용하여 시작하기 때문에 제대로 로드되지 않았을 수도 있습니다.
이를 위해
getStaticProps 파일에서 웹폰트를 변환하면 웹폰트를 약간 늦출 수 있습니다.// ./pages/index.js
...
// Replaces DOM nodes with React components
function replace(node){
const attribs = node.attribs || {}
// Replace links with Next links
if(node.name === `a` && isUrlInternal(attribs.href)){
const { href, ...props } = attribs
if(props.class){
props.className = props.class
delete props.class
}
return (
<Link href={href}>
<a {...props}>
{!!node.children && !!node.children.length &&
domToReact(node.children, parseOptions)
}
</a>
</Link>
)
}
// Make Google Fonts scripts work
if(node.name === `script`){
let content = get(node, `children.0.data`, ``)
if(content && content.trim().indexOf(`WebFont.load(`) === 0){
content = `setTimeout(function(){${content}}, 1)`
return (
<script {...attribs} dangerouslySetInnerHTML={{__html: content}}></script>
)
}
}
}
...
자동 통합
통합이 자동화되지 않는 한 ADI는 그렇지 않을 것이다.우리가 진정으로 원하는 것은 다음이다.웹플로우 디자인이 바뀔 때마다 js 사이트는 자동으로 업데이트됩니다.
와 Netlify는 모두 넥스트의 절호의 주최국이다.js 사이트.이 자습서에서는 Vercel을 사용하여 다음 코스를 진행합니다.js 프로젝트.아직 없으면Vercelpages/index.js를 꼬리 슬래시가 없는 Webflow 사이트 URL로 설정해야 합니다.
Vercel 대시보드deploy your Next.js project to Vercel에서이 URL을 복사합니다.
그리고 웹플로우 사이트의 대시보드you can create a deploy hook in the "git" section에 있습니다.트리거 유형으로 Site publish 를 선택하고 Vercel에서 가져온 URL을 Webhook URL로 붙여 넣습니다.
Webflow 사이트가 변경 내용을 게시할 때마다 다음 변경 내용을 다시 생성하기 위해 Vercel에 알림을 보냅니다.js 프로젝트.
통합 탭에서 Webhook URL 만들기
한층 더
. 이것은 단지 이런 집적의 기본적인 실현일 뿐이다.우리가 어떻게 진일보한 행동을 취할 것인가에 대해 나는 몇 가지 생각이 있다.
. 이것은 단지 이런 집적의 기본적인 실현일 뿐이다.우리가 어떻게 진일보한 행동을 취할 것인가에 대해 나는 몇 가지 생각이 있다.
Reference
이 문제에 관하여(Webflow 및 Next 통합js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kennedyrose/integrating-webflow-and-next-js-39kk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
