小编wat*_*902的帖子

我经常将 React 应用程序制作为 SSR。这时候我用的是docker容器。

我写了以下内容Dockerfile

# pull base image\n\xe3\x83\xbb\n\xe3\x83\xbb\n\xe3\x83\xbb\nCOPY package.json ./\nCOPY package-lock.json ./\n\nRUN npm install\n\nCOPY . ./\nCMD ["npm", "start"]\n

但是，我突然想到我可以使用volumes prop而不是copy prop在docker-compose中。如下docker-compose.yml文件：

volumes:\n- ./:/usr/src/app\n

copy props使用而不是有什么优点volumes props？

我想将 Linaria 库（https://github.com/callstack/linaria）与 nextJS 一起使用。现在我就按照文档实现了。但发生了下一个错误。

全局 CSS 无法从 Custom 以外的文件导入。请将所有全局CSS导入移至pages/_app.js。了解更多： https: //err.sh/next.js/css-global

我理解这个错误。但我想知道。如何将 Linaria 与 NextJS 结合使用？

• .babelrc

{
  "presets": ["next/babel", "linaria/babel"],
}

• next.config.js

const path = require("path");

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },

  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx$/,
      use: [
        {
          loader: "linaria/loader",
          options: {
            sourceMap: process.env.NODE_ENV !== "production",
          },
        },
      ],
    });

    return config;
  },
};

我使用react-router 实现页面导航。从 A 移动到 B 后从 B 移动到 A 时，需要回页行为。因此，我写了下面的内容。

import { useHistory } from 'react-router';

const history = useHisotry()

history.goBack();

效果很好。但我对此有疑问。我可以用window.hisotry.back()代替useHisotry() back.

为什么使用useHistory goBack函数而不是窗口历史记录返回函数？

我想用Leaflet我想与 NextJS(typescript) 一起

但Leaflet不支持SSR。所以，我用react-leaflet-univarsal.

然后，我自定义了Leaflet的Marker组件。所以，我想用Leaflet.Icon. 我尝试了两件事。

1. if(process.browser){}

这是没有找到的window。

2. 使用动态导入next/dynamic

let iconPerson: any;
  const DynamicComponent = dynamic(
    () =>
      import('leaflet').then(L => {
        iconPerson = (L as any).Icon.extend({
          options: {
            iconUrl: '/images/icon1.jpg',
            iconRetinaUrl: '/images/icon1.jpg',
            iconSize: new (L as any).Point(60, 75),
            className: 'leaflet-div-icon',
          },
        });
      }) as any,
    { ssr: false },
  );

....

<Marker icon={iconPerson}>

这是打印出来的。> 无法读取未定义的属性“createIcon”

L.icon是和NextJS一起使用的方式吗？