时间戳

首页 > 解决方案 > 如何突破 Next/React 导入地狱？

reactjs - 如何突破 Next/React 导入地狱？

问题描述

在使用 Vue 和 Nuxt 一年多之后，我决定学习 React 和 Next.js，几乎立刻就注意到了可怕的开发者体验。

每个样式表和组件都需要导入，因此在每个组件的开头总是存在臃肿的导入地狱。

更不用说你是否需要一个额外的库，因为你不能像 Nuxt 的this.$plugin选项那样挂钩任何全局对象。

是否有一些包来管理 Nextjs 的这些导入？据我所知，使用它的每个人都不介意它，这让我感到惊讶。

这个问题可能是对 React 的一种侮辱，但我只想至少有一个理由加入炒作列车，了解为什么 React 更受欢迎。

标签： reactjsnext.js

解决方案

在pages目录中创建一个文件，命名为它_doucument.js或_document.ts（对于 TypeScript）并在其中导入 React，如下所示：（
以下代码是 TypeScript）

import React from 'react';
import Document, {
    DocumentContext,
    Head,
    Html,
    Main,
    NextScript,
} from 'next/document';


export default class CustomDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps };
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                    <title>Your title</title>
                </Head>
                <body>
                <Main />
                <NextScript />
                </body>
            </Html>
        );
    }
}

并且不再需要在任何组件中导入 React。

推荐阅读