在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Velenir/nextjs-ipfs-example开源软件地址:https://github.com/Velenir/nextjs-ipfs-example开源编程语言:JavaScript 100.0%开源软件介绍:Deploying Next.js site to IPFS
// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
const scriptTxt = `
(function () {
const { pathname } = window.location
const ipfsMatch = /.*\\/Qm\\w{44}\\//.exec(pathname)
const base = document.createElement('base')
base.href = ipfsMatch ? ipfsMatch[0] : '/'
document.head.append(base)
})();
`
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script dangerouslySetInnerHTML={{__html: scriptTxt}}/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
<img src="example.png"/>
// or
<img src="./example.png"/>
// next.config.js
module.exports = {
assetPrefix: './',
}
import {resolve} from 'url'
const BaseLink = ({href, as, ...rest}) => {
const newAs = useMemo(() => {
let baseURI_as = as || href
// make absolute url relative
// when displayed in url bar
if (baseURI_as.startsWith('/')) {
// for static html compilation
baseURI_as = '.' + href
// <IPFSLink href="/about"> => <a class="jsx-2055897931" href="./about">About</a>
// on the client
// document is unavailable when compiling on the server
if (typeof document !== 'undefined') {
baseURI_as = resolve(document.baseURI, baseURI_as)
// => <a href="https://gateway.ipfs.io/ipfs/Qm<hash>/about">About</a>
}
}
return baseURI_as
}, [as, href])
return <Link {...rest} href={href} as={newAs} />
} This way a As IPFS doesn't support automatic redirect to index for 404 routes, which is commonly employed when hosting SPA, one may want Or better yet use module.exports = {
assetPrefix: './',
exportTrailingSlash: true,
}
yarn build && yarn export
ipfs add -r out |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论