nextJS自定义document

最新推荐文章于 2023-04-06 15:14:03 发布

Chatwei

最新推荐文章于 2023-04-06 15:14:03 发布

阅读量2.8k

点赞数

分类专栏： react学习

本文链接：https://blog.csdn.net/weixin_44677431/article/details/90319156

版权

react学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

_document.js是什么

1.它只有在服务端渲染的时候才会被调用，客户端渲染，它是不会起任何作用的
2.它用来修改服务端渲染的文档内容
3.一般用来配合第三方css-in-js方案使用

示例

import Document, { Html, Head, Main, NextScript } from 'next/document'
// 2.比如：监听每个渲染组件的内容
function withLog(Comp) {
    return props => {
        console.log(props)
        return <Comp { ...props } />
    }
}
class AntDocument extends Document {    
    static async getInitialProps(ctx) {
		// 1.这里采用react里High Order Component的方式，可以重新包装APP和所有渲染的组件
		// 这里还可以扩展一些高级的功能，比如css in js的方案
        const originalRenderPage = ctx.renderPage
		ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: App => withLog(App),                      
                enhanceComponent: Component => withLog(Component)      
            })
        // 因为覆盖了Document，所以要重新返回页面的props
        const props = await Document.getInitialProps(ctx)
        return {
            ...props
        }
    }

    render() {
        return (
            <Html>
                <Head>
                    <title>欢迎访问测试系统</title>                                 // 不建议在这里定义title，建议在页面内部定义，如下：
                    <style>{`.test{color:blue}`}</style>                          // import Head from 'next/head'
                </Head>
                <body className='test'>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default AntDocument

Chatwei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nextJS自定义document

_document.js是什么1.它只有在服务端渲染的时候才会被调用，客户端渲染，它是不会起任何作用的2.它用来修改服务端渲染的文档内容3.一般用来配合第三方css-in-js方案使用示例import Document, { Html, Head, Main, NextScript } from 'next/document'class AntDocument extends Doc...
复制链接

扫一扫