小编brc*_*-dd的帖子

页面重新加载时 getInitialProps 不起作用

我在 _app.js 组件中使用 getInitialProps,但是当我重新加载页面时,请求不会执行。

例如:

// getData.js
import * as axios from 'axios';
export default async function getData() {
  const response = await axios.get('http://someapi.com/');

  return response.data;
}
Run Code Online (Sandbox Code Playgroud)

然后我将使用这些数据......

// _app.js
import getData from './getData';
import App, { Container } from "next/app";

class MyApp extends App {
  static async getInitialProps() {
    const response = await getData();

    if (response) {
      return { response };
    }
    return {};
  }
  render() {
    const { Component, response } = this.props;
    <Container>
      <Component {...this.props} data={response} /> …
Run Code Online (Sandbox Code Playgroud)

node.js reactjs next.js

5
推荐指数
0
解决办法
1460
查看次数

Next JS config 多插件配置

const {
  DEVELOPMENT_SERVER,
  PRODUCTION_BUILD
} = require("next/constants");

require('dotenv').config()

const path = require('path')
const Dotenv = require('dotenv-webpack')

const nextConfig = {
  webpack: config => ({ ...config, node: { fs: "empty" } })
};
module.exports = phase => {
  if (phase === DEVELOPMENT_SERVER || phase === PRODUCTION_BUILD) {
    const withCSS = require("@zeit/next-css");
    return withCSS(nextConfig);
  }
  return nextConfig;
};
*module.exports =  {
  webpack: (config) => {
    config.plugins = config.plugins || []
    config.plugins = [
      ...config.plugins,
      // Read the .env file
      new Dotenv({
        path: …
Run Code Online (Sandbox Code Playgroud)

apollo reactjs webpack next.js

5
推荐指数
2
解决办法
4629
查看次数

如何从 .next 文件夹启动我的项目?

我想从构建文件夹 (.next) 启动我的 NextJS 项目。我运行next build命令,得到 .next 文件夹,然后...我多次尝试从 .next 文件夹启动项目,并使用了很多方法,但没有成功。谁能解释一下从构建文件夹启动 NextJS 项目需要做什么?

reactjs next.js

5
推荐指数
1
解决办法
4740
查看次数

Next JS 环境变量在生产中不起作用

根据 Next.js 文档,您需要在keynext.config.js下声明环境变量env,以便在构建时读取它们:

env: {
    GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID
  }, 
Run Code Online (Sandbox Code Playgroud)

这在我的本地环境中正常工作,变量被隐藏_NEXT_DATA,我仍然可以从客户端访问它们。问题是在将应用程序部署到生产环境时,它无法再从process.env. 有人遇到过这个问题吗?注意:我不想暴露敏感数据。NEXT_PUBLIC_向环境变量添加前缀_NEXT_DATA是否也会暴露它们?

environment-variables reactjs next.js

5
推荐指数
1
解决办法
4020
查看次数

afterInteractive和lazyOnload策略有什么区别?

在新next/script组件中,我们有以下策略:

afterInteractive默认):用于在页面交互可以获取并执行的脚本,例如标签管理器和分析。这些脚本被注入到客户端并在水合后运行。

lazyOnload:对于可以在空闲时间等待加载的脚本,例如聊天支持和社交媒体小部件

这两个定义看起来很相似,它们有何不同?

next.js

5
推荐指数
1
解决办法
6648
查看次数

如何使用 Cookie 作为我的 redux 工具包中的初始状态?

我有这个 cartSlice,我想通过使用 cookie 作为初始状态来保留购物车,但问题是,如果我将 useSelector 调用到我的组件,则返回值是一个空对象。cookie 在那里,但我不知道为什么它没有被使用。useSelector 的返回值是一个空对象。

大车

[
    {
        "cartItem": {
            "id": "628a1738fd8299ae6659d994",
            "category": "chair",
            "name": "chair",
            "image": "https://res.cloudinary.com/dpxoclpym/image/upload/v1658125036/product-images/chair/chair-beige_02_at0trj.png",
            "color": "beige",
        },
        "itemQuantity": 1,
        "quantity": 1
    },
    {
        "cartItem": {
            "id": "628a1738fd8299ae6659d994",
            "category": "chair",
            "name": "chair",
            "image": "https://res.cloudinary.com/dpxoclpym/image/upload/v1658141184/product-images/chair/chair-navy_02_rrpazi.png",
            "color": "navy",

        },
        "itemQuantity": 1,
        "quantity": 1
    }
]
Run Code Online (Sandbox Code Playgroud)

购物车切片

import { createSlice } from '@reduxjs/toolkit';
import Cookies from 'js-cookie';

const cartItem = Cookies.get('cartItems')
  ? JSON.parse(Cookies.get('cartItems'))
  : [];

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    cart: cartItem,
    quantity: 1, …
Run Code Online (Sandbox Code Playgroud)

reactjs next.js redux-toolkit

5
推荐指数
0
解决办法
1785
查看次数

检查失败:U_SUCCESS(状态)

当我尝试启动 next.js 时,Node 12.0.0 在 Windows 10 x64(内部版本 17134)上崩溃(:

#
# Fatal error in , line 0
# Check failed: U_SUCCESS(status).
#
#
#
error Command failed with exit code 3221225477.
Run Code Online (Sandbox Code Playgroud)

我回滚到节点 11.14.0 并且它工作正常。

是否有修复,或者只是一个很快就会修复的错误?

node.js next.js

4
推荐指数
1
解决办法
3221
查看次数

找不到模块:无法解析“/Users/Austin/node_modules/pg/lib”中的“dns”

next.js 的问题

  Module not found: Can't resolve 'dns' in '/Users/Austin/node_modules/pg/lib'
    Could not find files for /index in .next/build-manifest.json
    ModuleNotFoundError: Module not found: Error: Can't resolve 'dns' in '/Users/Austin/node_modules/pg/lib'
Run Code Online (Sandbox Code Playgroud)

我很难理解这个错误信息。我正在使用 next.js 并尝试创建不同的网页。我将启动该程序,运行 npm run dev,它首先会给我以下信息:

[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
Run Code Online (Sandbox Code Playgroud)

然后给我这个错误。这个错误是什么意思?我在网上找到了不同的答案,但到目前为止都没有奏效。

javascript next.js

4
推荐指数
1
解决办法
1307
查看次数

如何在 Next.js 中获取图像的高度和宽度属性?

我只是想知道如何使用<Image>Next.js 中的组件让图像拥有自己的高度和宽度,而不是自己定义高度和宽度?

next.js nextjs-image

4
推荐指数
1
解决办法
4072
查看次数

Next js - 每次更改路由时调用服务器端的函数

我正在将旧堆栈移至下一个 js,我需要一些帮助。

我有一个 php 后端,每次更改路由时我想从该后端检查控制器,并且我想在服务器端执行此操作。

为了改变路线,我使用Linknext-routes,它只对客户端有效。

有什么方法可以在不刷新应用程序的情况下调用服务器端的控制器吗?

php reactjs server-side-rendering next.js

3
推荐指数
1
解决办法
3756
查看次数