我有一个代码，我可以在其中获取图像名称

const [foundImg, setFoundImg] = useState(false)
var imgNames = []
---
axios.get('http://someapi.com')
.then(res => {
  imgNames.push(res.data)
  setFoundImg(true)
}.catch(err => console.log(err)

我把这个条件放在返回/渲染中

         { (foundImg === true) 
            ? itemImg.map( i => {
              return <div className="product--box">
                <Image width={50} height={50} src='/public/dummy.png' className='img'/>
              </div>
            })
            : null
          }

但问题是，当获取图像名称时，组件不会重新渲染。所以现在还是空的。我怎样才能在获取返回数据时渲染该图像？

我正在使用 nextJs 并且需要添加对 less 和 css 的支持。我想为一个项目同时使用 next-css 和 next-less。但它一次接受一个。这是我正在使用的

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  /* config options here */
})

const withLess = require('@zeit/next-less')
module.exports = withLess({
    cssModules: false,
    lessLoaderOptions: {
        javascriptEnabled: true
    }
})

我是否正确地包括了两个装载机？我也需要 javascriptEnabled: true 。我们如何才能实现这种配置。

如果您能提供任何提示或两个提示，我将不胜感激。

我一直在尝试在 next.config.js 中使用 sass 和 css 模块，但不断遇到此错误：

Failed to compile.

./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css
Unknown word (1:1)

> 1 | var api = require("!../../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../../../../../../css-loader/index.js!./index.css");
  3 | 
  4 |             content = content.__esModule ? content.default : content;

在 github 和 stackoverflow 上阅读之后，这听起来像是因为我的 next.config.js 中有两个 css 模块配置实例，但我不确定如何将其减少到一个，同时仍然保持此逻辑不变：

      config.module.rules.push({
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      });

下面是我完整的 next.config.js

const path = require('path');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

const aliasPathsToResolve = [ …

我有下一个 js 应用程序，我有一个返回 1000 万个帖子的 API，我想知道我使用 SSG 方法来做到这一点是否标准？另外我可以随时添加帖子。

我尝试学习 Next.js 但遇到了一个小问题。这是我的测试代码：

import Link from 'next/link';
export default () => (
    <p>Hallo next <Link href="/abouts?id=2" as='/abouts/1'><a>About</a></Link></p>
)

如果我在 index.js 页面中单击“关于”链接，我的 url 看起来'/about/1/'并工作正常，但如果我刷新页面，则会收到错误 404。如果我在浏览器中输入/abouts?id=2"并刷新页面，则一切正常。你知道我该如何解决这个问题吗？我想要有像这样的链接

/about/1/

我正在使用next-optimized-imagespackage 来优化 next.js 项目中的图像。

这是一个配置，应该使我能够加载图像并使用 URL 参数自动调整它们的大小，例如?sizes[]=300

什么有效

next.config.js

const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages({
  optimizeImagesInDev: true,
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: "responsive-loader",
        options: {
          adapter: require("responsive-loader/sharp"),
        },
      },
    ],
  },
});

我也在使用png和jpg优化库：

"imagemin-mozjpeg": "^8.0.0","imagemin-optipng": "^6.0.0"

我的 JSON/JS 文件的图像结构如下：

{
  ...,
  imgs: [
    require("../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300"),
    ...,
  ]
}

这样，当使用它时responsive-loader，所有内容都会按其应有的方式加载，即图像的路径将替换为应用程序中包含两个不同大小的路径的对象。

什么不起作用

然而，不起作用的是require在每个图像数组元素中引入声明之前曾经起作用的测试（玩笑测试）。它只是说它无法导入所需的模块，因为很可能它不使用使用参数解析这些路径的 webpack 配置。我如何告诉它这样做？

错误信息：

Cannot find module '../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300' from 'categories.js'

我不能简单地使用图像的路径，然后在标签require中使用它们<img …

我用和创建了动态页面。Next jsRedux

我有一个关于我的网络使用的简单流程

1. 登入

2. 重定向到index.html使用next/router.

3. 单击一个<Link href="/DYNAMIC_PAGE"/>.

4. 进入/DYNAMIC_PAGE页面。

每个步骤都运行良好，但在 step3 和 step4 之间存在一些问题。

当我点击并<Link />标记到 时/DYNAMIC_PAGE，它会被重新加载。

它会影响我的 Redux状态。

我想避免在进入DYNAMIC_PAGES时重新加载

import * as React from "react";
import { NextPage } from "next";
import Layout from "components/Layout";
import Content from "components/courses/Content";
import axios from "axios";

const ExamplePage: NextPage = (props: any) => {
  return (
    <Layout title="About | Next.js …