标签: server-side-rendering

我正在尝试使用 Nextjs 13 与 Next-auth 和 Apollo 客户端。为此，我们用提供者包装根布局，但我们也需要'use client'指定。我对图书馆没有任何问题。

但令我困惑的是，nextjs 13 app dir 默认使用服务器优先的方法，如果我将根布局视为客户端，它是否会使所有页面成为客户端？因为，据我所知，根布局是整个路线的父级

Github讨论

我在 Svelte 中制作了一个应用程序，现在我想将其移植到 SvelteKit。我的应用程序使用window和document对象，但这些在 SSR 中不可用。首先，它抛出了ReferenceError: window is not defined，但我通过检查应用程序是否在浏览器中运行来解决这个问题。但正因为如此，我的应用程序无法运行。

如何将 props 传递给布局的 page.jsx ？(下13)

//app/blog/layout.jsx

export default function RootLayout({ children }) {
  return (
    <div>
      <Navbar />
      <Sidebar />
      {/*How do I pass any props from this root layout to this {children} that Im getting from page.jsx*/}
      {children}
    </div>
  );
}

基本上，如何将 prop 传递给函数 prop（Next.JS 13）？

当我使用 npm run dev 运行 NextJS 应用程序时，图像组件给出错误"missing required "width" property"

为了使应用程序正常工作，我需要将宽度和高度设置为项目中所有图像组件的内联属性。

**注意：我尝试使用 CSS 外部文件设置宽度和高度，但没有成功。仅设置内联属性才有效。

完全错误

error - Error: Image with src "https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/1200px-Flag_of_the_United_States.svg.png" is missing required "width" property.
at eval (webpack-internal:///./node_modules/next/dist/client/image.js:465:27)
at renderWithHooks (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
at renderForwardRef (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5842:18)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderHostElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderIndeterminateComponent (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
at renderElement (C:\Users\sdweikat\mysecond\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
at …

我收到这个错误，虽然项目中没有一行带有：first-child，为什么会出现？

...................................................... ...................................................... ...................................................... ...................................................... ................................................

 "dependencies": {
    "@storybook/addon-a11y": "^5.1.9",
    "@trendmicro/react-popover": "^0.4.0",
    "@types/classnames": "^2.2.9",
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "16.8.18",
    "@types/react-dom": "16.8.4",
    "@types/react-modal": "^3.8.2",
    "@types/storybook__addon-a11y": "^5.0.0",
    "@types/storybook__addon-actions": "^3.4.3",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^5.0.0",
    "@types/storybook__react": "4.0.1",
    "@types/styled-components": "4.1.15",
    "classnames": "^2.2.6",
    "grommet": "^2.7.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-modal": "^3.9.1",
    "react-scripts": "3.0.1",
    "react-toastify": "^5.3.2",
    "styled-components": "^4.2.0",
    "typescript": "^3.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook",
    "build-storybook": "build-storybook -c .storybook -o .out",
    "lint": "tslint -c …

问题

当我在任何文件中时，我的 Next.js/React/Node 应用程序崩溃import Chart from "react-apexcharts"。尝试访问应用程序会导致以下错误：（
Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
请参阅下面的调用堆栈）。
无论导入的内容<Chart/>是在页面中呈现还是未使用，都会发生这种情况。有趣的是，如果我保存文件并启动 Next.js 快速刷新，我的应用程序就会开始正常工作（有时）。但是，当我刚刚启动应用程序并尝试访问它时，或者当我使用f5手动刷新时，会发生上述错误。基本上，它仅在 Next.js 快速刷新后才起作用（有时，大概是随机的，它在这种情况下也不起作用，抛出与以前相同的错误）。

环境

Node.js (14.16.0)、React (17.0.2)、Express (4.17.1)、Next.js (10.2.0)、react-apexcharts(1.3.9)、apexcharts(3.26.3)、Edge 浏览器、Win10。
Next.js 服务器与 Express 服务器集成在一起。

记录

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\georg\Documents\development\web\projects\Angelina-Website\node_modules\apexcharts\dist\apexcharts.common.js:6:345884)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)   
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)        
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at …

在 Next.js 中尝试使用动态路由进行浅层路由时，页面被刷新并被忽略。似乎很多人对此感到困惑。

假设我们从下一页开始

router.push(
  '/post/[...slug]',
  '/post/2020/01/01/hello-world',
  { shallow: true }
);

然后我们转到另一篇博文：

router.push(
  '/post/[...slug]',
  '/post/2020/01/01/foo-bar',
  { shallow: true }
);

这个不会触发浅层路由，浏览器刷新，为什么？

在代码库中很清楚这是一个特性：

// If asked to change the current URL we should reload the current page
// (not location.reload() but reload getInitialProps and other Next.js stuffs)
// We also need to set the method = replaceState always
// as this should not go into the history (That's how browsers work)
// We should compare the new asPath to the …

我对 Next js 及其部署过程相当陌生。我最近将我的一个 React js 项目转换为 Next js，以便利用 Next js 提供的服务器端渲染功能。现在到了部署时间，我发现如果node_modules服务器中没有该文件夹，下一个版本将无法部署。我在我的页面中使用getServerSideProps并使用"build": "next build"package.json 中的命令进行构建。问题是我的 node_modules 文件夹接近 300MB（.next构建又增加了大约 10MB），我认为每次部署都伴随这么大的重量并不是最佳实践（我打算部署此构建的不同实例，因此 310MB）服务器中的 X 个实例）。我在这里做错了什么还是这是实现这一目标的唯一方法？我很感激任何答案。谢谢...

（在多次编辑我原来的问题后，我决定彻底修改它，使其更加清晰和简洁。这是根据StackOverflow 的建议。）

设置：

创建一个新的 Nuxt 3 项目：

pnpm dlx nuxi init test-project
cd test-project
pnpm i
pnpm run dev -o

app.vue像这样编辑：

<script setup>
const { data: thing } = useFetch("http://localhost:8000/things/1").then(res => {
  console.log(res)
  return res
})
</script>

<template>
  <div>
    <p>{{ thing }}</p>
  </div>
</template>

我添加了 console.log-statement 来跟踪提取发生的位置。

没有对配置进行任何更改。据我了解，Nuxt 3 默认为 SSR。

问题：

两种情况：

I. 当对代码进行更改app.vue并因此触发 HMR 时thing，将包含来自 API 的预期数据。

二. 但是，当浏览器刷新页面时thing将为空。段落标签将为空。

我的观察：

• 相同的行为适用于 useAsyncData()。
• 每次我触发 HMR（场景一）时，客户端都会向 API 发出请求并成功接收数据（如开发人员工具的网络选项卡中所示）。
• 每当我在浏览器中刷新页面（场景二）时，我都会在终端中收到一份控制台日志，在浏览器控制台中收到一份控制台日志。两者都包含状态代码 500 的错误和消息“fetch …

我正在使用 nextjs 和 mui。我在渲染页面时遇到警告。这是我的代码。请帮忙解决问题！！！

import "../styles/globals.scss";\nimport { AppProps } from "next/app";\nimport useGetAuthentication from "../hooks/useGetAuthentication";\nimport States from "../interfaces/states";\nimport STATUS from "../constants/status";\nimport { CssBaseline } from "@mui/material";\nimport { ThemeProvider } from "@mui/material/styles";\nimport theme from "../styles/theme";\nimport Layout from "../layouts/Layout";\nimport Head from "next/head";\nimport * as React from "react";\nimport Login from "../components/Login";\nimport { Box } from "@mui/material";\n\ninterface MyAppProps extends AppProps {\n  emotionCache?: EmotionCache;\n}\n\nconst checkStatusCode = (statusCode: number): boolean => {\n  return statusCode === STATUS.NOT_FOUND || statusCode === STATUS.INTERNAL_SERVER_ERROR;\n};\n\nfunction App({ Component, pageProps }: AppProps) {\n …