NextJS处理服务器server端的npm模块

NextJS作为一个SSR框架，一大特色在于getInitialProps方法。大部分情况下，在这里发起API请求获取组件的初始数据。然而，如果这里面包含了server端特有的模块，比如fs等，编译的时候会出错，因为webpack尝试将其作为前端模块打包。

[ error ] ./node_modules/request/lib/har.js
Module not found: Can't resolve 'fs' in '/Users/wangsijie/Development/nextjsapp/node_modules/request/lib'

一种曲线救国的方式是，把server端的代码都写在api里面，然后用“自己请求自己”的方式获取数据，这样就不会被webpack打包。但其实可以直接让webpack忽略这些模块，毕竟，前端并不会真的执行这些代码。

安装null-loader模块

npm i -D null-loader

修改next.config.js文件，如果之间没有的话需要添加一个：https://nextjs.org/docs/api-reference/next.config.js/introduction

module.exports = () => {
    return {
        webpack: (config, { isServer }) => {
            if (!isServer) {
                // Ensure the module is not included in the client bundle
                config.module.rules.push({
                    test: /tcb-admin-node/,
                    use: "null-loader",
                })
            }
            return config
        },
    };
}

其中，tcb-admin-node需要替换成自己的模块，比较方便的是，把所有server端用到的模块（一般是调用了NodeJS自带模块的），放进一个专门的文件夹里，然后直接设置忽略这个文件夹即可，例如，全部放进server文件夹：

module.exports = () => {
    return {
        webpack: (config, { isServer }) => {
            if (!isServer) {
                config.module.rules.push({
                    test: /server/,
                    use: "null-loader",
                })
            }
            return config
        },
    };
}