Next.js 13 已发布。重构的组件之一是next/image.
我想使用它，但我想使用顺风设置图像大小。
这是我的代码：
import Image from 'next/image'
const Index = () => {
return (
<div>
<Image
src="https://picsum.photos/800/600"
layout="fill"
className="w-48 aspect-square md:w-72 xl:w-48"
/>
</div>
)
}
我收到此错误：
错误：src“https://picsum.photos/800/600”的图像缺少必需的“width”属性。
但是，在文档中据说可以fill在不指定width和 的情况下使用height。
我在这里想念什么？
我对如何在 Next.js 13 中管理客户端组件的 SEO 感到困惑。
假设我想创建一个联系我们页面：/contact
在新框架中，我应该在目录contact中创建一个名为的文件夹app。我应该在其中创建一个page.js按惯例调用的页面。
现在我需要创建一个表单，它当然需要管理其状态。因此我应该使用useStateReact 或其他钩子。
但是当我这样做时，Next.js 编译器会抱怨它是一个服务器组件，如果我想在客户端使用它，我应该'use client'在顶部用指令标记它。
但我不希望组件在客户端呈现。我需要我的/contact页面被搜索引擎索引。
我应该怎么办？
这是我的 axios 配置：
import axios from "axios"
const axiosApi = axios.create({
baseURL: import.meta.env.VITE_API_URL
})
const requestInterceptor = config => {
config.headers['Content-Type'] = 'application/json';
config.headers['Accept'] = 'application/json';
config.headers['X-Client'] = 'React';
return config;
}
axiosApi.interceptors.request.use(requestInterceptor);
const get = async (url) => {
return await
axiosApi.get(url, {
crossDomain: true
}).then(response => {
return response?.data;
})
}
const post = async (url, data) => {
return await axiosApi
.post(url, Array.isArray(data) ? [...data] : { ...data })
.then(response => response?.data)
}
const form = async …我们在 next.js 12 应用程序中使用了 React 的上下文 API。
我们想要升级到 next.js 13。
我们得到这个错误：
React__WEBPACK_IMPORTED_MODULE_0__.createContext 不是一个函数
对于这段代码：
import React from 'react'
const SiteContext = React.createContext()
export default SiteContext
我们现在应该做什么？我在网上找不到这方面的资源。
另外，我们需要服务器上的 Context API，因为 SEO 很重要，而且我们不想在客户端上呈现。
这是我的 axios 配置：
const axiosApi = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL
})
axiosApi.interceptors.response.use(
response =>
response
,
error => {
if (error.response.status === 404) {
throw new Error(`404\nService does not exist\n${error.request.path}`)
}
}
)
export async function get(url) {
console.log(url)
return await
axiosApi.get(url, {
crossDomain: true
}).then(response => {
return response?.data
})
}
问题是当我尝试 get 时/path?key=value，我收到/pathkey=value does not exist错误。
虽然console.log(url)向我显示带有问号和查询字符串的真实 URL，但响应拦截器会删除问号并导致 404。
知道为什么会发生这种情况吗？
考虑这两个函数：
const render = (entity) => {
// function body
}
const render = ({
entity,
isAdmin
}) => {
// function body
}
现在假设我想调用这个函数。如果它接受解构的对象，我应该以不同的方式传递参数。
render({
name: 'John',
age: 40
})
// or
render({
entity: {
name: 'John',
age: 40
},
isAdmin: true
})
有没有办法让我知道函数是否接受解构对象作为其参数？
请注意，render.length这两个函数都返回 1。并且arguments对我没有帮助，因为它可以在函数内部访问，而不是在函数外部访问。
更新。
这是真实的场景。
我们有一个管理面板（类似于 React Admin），许多公司的 500 多个项目都在使用它。您可以想象我们有数千个列表以表格格式显示。
现在，对于每个表，开发人员为我们提供了一个render函数，该函数是用于表的每一行的 React 组件。
这就是他们使用我们<List />组件的方式：
const Customers = () => {
return <List
// other props …在旧的 KeyCloak 版本中，我们可以使用：
/opt/jboss/keycloak/bin/standalone.sh -version
这将打印版本信息。
但在新版本中，这似乎已standalone.sh被删除。
如何获取较新版本中的版本？
In React, I had this component:
const Title = ({ children }) => {
return <h2>{children}</h2>
}
export default Title
And I could easily use it as <Title>Something</Title>
In Qwik, I can create the same component:
import { component$ } from '@builder.io/qwik'
const Title = component$(({ children }) => {
return <h2>{children}</h2>
})
export default Title
But <Title>Something</Title> does not work. Even <Title children='Something' /> does not work. But if I change the prop name to text, then <Title …
这是我的代码：
import * as React from "react";
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import Stack from "@mui/material/Stack";
export default function DescriptionAlerts() {
const message =
"This is a message \n This message has Enter in it \n MUI Alert does not honor the Enter \n I can not use dangerouslySetInnerHTML \n Because this message contains <h1>Hi</h1> in it \n And I want to show that HTML string to my user \n I don't want to render that HTML"; …我正在尝试在 docker 内开发 astro.js。
这是我的docker-compose.yml文件：
version: "3.9"
services:
site:
image: node:lts-bullseye-slim
ports:
- 3000:3000
volumes:
- /project:/project
command: >
sh -c
"
cd /project
&& npm run install
&& npm run dev &
tail -f /dev/null
"
我可以看到 astro 正在 docker 内运行。我可以curl localhost:3000从 docker 容器内部，它向我显示 astro 项目的默认页面。
然而，当我尝试访问localhost:3000我的笔记本电脑时，它给出了 msERR_EMPTY_RESPONSE错误。
我应该怎么办？
更新：
/project只是一个astro使用命令创建的非常简单的典型应用程序npx create-astro。