我创建了一个新组件 Navbar.jsx
import { Disclosure } from '@headlessui/react'
import Image from 'next/image'
import tacoPicture from '../public/lets-taco-bout-it.png'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export const Header = () => {
return (
<Disclosure as="nav" className="bg-white shadow">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<Image src={tacoPicture} alt="Picture of the author" />
</div>
</div>
</div>
</div>
</>
)}
</Disclosure>
)
}
所以，这需要用一个故事来描述。在我的文件 Navbar.stories.jsx 中，我执行以下操作
import { Navbar …我一直在执行以下步骤：https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用，我已经重新安装了最新版本的 gatsby-source-strapi，以便能够获取 publicURL。不过，这会通过本地文件......
这是我的 gatsby-config.js
module.exports = {
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337",
contentTypes: ["articles"],
singleTypes: [`homepage`, `global`],
queryLimit: 1000,
},
},
"gatsby-plugin-postcss",
],
};
我的博客页面如下所示
import React from 'react';
import Footer from '../partials/Footer';
import Navbar from '../partials/Navbar';
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
allStrapiArticles{
edges {
node {
strapiId
title …在我的next.js应用程序中，我尝试配置 Apollo 端点：
import { ApolloServer, gql } from "apollo-server-micro";
// This data will be returned by our test endpoint. Not sure if I need id? https://apuyou.io/blog/serverless-graphql-apollo-server-nextjs
const tacos = {
meat: [
{
type: 'Al Pastor',
imgURL: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190130-tacos-al-pastor-horizontal-1-1549571422.png?crop=0.668xw:1.00xh;0.175xw,0&resize=480:*'
},
{
type: 'Barbacoa',
imgURL: 'https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2021/02/Barbacoa-Tacos-3.jpg'
},
{
type: 'Chorizo',
imgURL: 'https://www.seriouseats.com/thmb/-8LIIIObcZMUBy-9gXlMsHcaeMI=/610x458/filters:fill(auto,1)/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__recipes__images__2014__04__20140428-sloppy-joe-chorizo-taco-recipe-food-lab-lite-8-503212a07b0a4d499952ff40aed57694.jpg'
},
],
fish: [
{
type: 'Camaron',
imgURL: 'https://juegoscocinarpasteleria.org/wp-content/uploads/2019/07/1563435179_315_Tacos-De-Camarones-Con-Crema-De-Cal-Y-Cilantro.jpg'
},
{
type: 'Salmon',
imgURL: 'https://www.cookingclassy.com/wp-content/uploads/2015/04/salmon-tacos-with-avocado-salsa4-srgb..jpg'
},
{
type: 'Pulpo',
imgURL: 'https://images.squarespace-cdn.com/content/v1/5710a8b3e707ebb8c58fea2c/1590075315244-QNXQE1LGPH06HV3EDF6B/tacos_34.jpg?format=1000w'
},
],
veggi: [
{
type: …我的 Next.js 多步骤表单工作得很好，所有步骤之间的切换都在一页 index.js 上
return (
<div>
<Head>
<title>Next.js Multi Step Form</title>
</Head>
< Navbar />
<div className={styles.container}>
<FormCard>
{formStep >= 0 && (
<ContractInfo
formStep={formStep}
prevFormStep={prevFormStep}
nextFormStep={nextFormStep}
/>
)}
{formStep >= 1 && (
<PersonalInfo
formStep={formStep}
prevFormStep={prevFormStep}
formStepToLast={formStepToLast}
/>
)}
{formStep >= 2 && (
<ConfirmPurchase
formStep={formStep}
prevFormStep={prevFormStep}
nextFormStep={nextFormStep}
/>
)}
</FormCard>
</div>
</div>
);
更新
在尝试了以下建议后，我最终更新了我的路径。我还简化了我的代码（硬编码），因为我只有两个步骤。index.js 的当前代码如下所示：
const App = () => {
const router = useRouter();
const [formStep, setFormStep] = useState(0);
const { setFormValues } = …我正在尝试外包 lib/cityData 中的函数fetchCityData，并稍后在不同的组件中使用它。我有一个 next.js 应用程序，我在其中使用 api 路由进行外部 API 调用。所以这有点复杂，但我的老板希望我这样做。让我们从
lib/cityData.js
const fetch = require('cross-fetch');
const fetchCityData = (city) => {
const options = {
method: `POST`,
};
fetch(`http://localhost:3000/api/weather?city=${city}`, options)
.then((response) => {
if(response.ok){
return response.json().then(data => console.log(data))
}
throw new Error('Api is not available')
})
.catch(error => {
console.error('Error fetching data: ', error)
})
}
fetchCityData('London')
module.exports.fetchCityData = fetchCityData;
现在我只是想在控制台中测试这段代码。如果我使用，fetch(/api/weather?city=${city})我会得到TypeError: Only Absolute URLs are support。如果我使用完整的 URL 只是为了测试它，我会得到Error fetching data: FetchError: request to http://localhost:3000/api/weather?city=London …
我正在测试我的组件
ForecastButtons.js
export const ForecastButtons = ({ city }) => {
const [payload, setPayload] = useState(null)
const getData = () => {
fetchCityData(city).then((payload) => setPayload(payload));
}
const location = payload?.location?.name;
const currentTemp = payload?.current?.temp_c;
return(
<div className="sm:col-span-2">
<p className="block text-sm font-medium text-gray-700">Select forecast</p>
<button onClick={getData} className="mt-1 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button'>
Today
</button>
<p key={city?.location?.id} className='my-5'>
{ location ? `Current weather in ${location} is ${currentTemp} degrees ` : 'Please search for city to …