我在vercel（https://abhirupkumar.vercel.app/）上托管了我的网站。第一页工作正常，但博客页面和blogPost页面不工作。每当我试图打开它时，它都会显示应用程序错误。我使用sanity.io和nextjs来构建此网站。blogs.js：
import Link from 'next/link'
import { createClient } from "next-sanity";
import imageUrlBuilder from '@sanity/image-url'
import React, { useEffect } from 'react';
import Navbar from '../components/NavBar';
const BlogPost = ({ blogs, profile }) => {
const client = createClient({
projectId: "xxxxxxxx",
dataset: "production",
useCdn: false
});
const builder = imageUrlBuilder(client)
return (
<div>
<Navbar profile={profile} />
<div className="my-12" id="blog">
<div className="container m-auto py-16 md:py-20 mb-8">
<h2 className="text-center font-header text-4xl font-semibold uppercase text-primary sm:text-5xl lg:text-6xl">
I also like to write
</h2>
<h4 className="pt-6 text-center font-header text-xl font-medium text-black sm:text-2xl lg:text-3xl">
Check out my latest posts!
</h4>
<div className="mx-auto grid w-full grid-cols-1 gap-6 pt-12 sm:w-3/4 lg:w-full lg:grid-cols-3 xl:gap-10">
{blogs && blogs.map((item) => {
return <Link key={item.slug.current} href={"/blogPost/" + item.slug.current} className="shadow">
<div>
<div style={{ backgroundImage: `url(${builder.image(item.blogimage).width(200).url()})` }}
className="group relative h-72 bg-cover bg-center bg-no-repeat sm:h-84 lg:h-64 xl:h-72">
<span
className="absolute inset-0 block bg-gradient-to-b from-blog-gradient-from to-blog-gradient-to bg-cover bg-center bg-no-repeat opacity-10 transition-opacity group-hover:opacity-50"></span>
<span className="absolute right-0 bottom-0 mr-4 mb-4 block rounded-full bg-primary border-2 border-primary px-6 py-2 text-center font-body text-sm font-bold uppercase md:text-base text-white cursor-pointer">Read More</span>
</div>
<div className="bg-gray-100 py-6 px-5 xl:py-8 cursor-pointer">
<span className="block font-body text-lg font-semibold text-black">{item.title}</span>
<span className="block pt-2 font-body text-grey-20">{item.metadesc}</span>
</div>
</div>
</Link>
})}
</div>
</div>
</div>
<div className="bg-primary">
<div className="container flex flex-col justify-between py-3 sm:flex-row">
<p className="font-body text-white md:text-left">
© Copyright 2022. All right reserved!
</p>
<div className="flex items-center justify-center pt-5 sm:justify-start sm:pt-0">
<a href="/">
<i className="bx bxl-facebook-square text-2xl text-white hover:text-yellow"></i>
</a>
<a href={profile.linkedinlink} className="pl-4">
<i className="bx bxl-linkedin text-2xl text-white hover:text-yellow"></i>
</a>
<a href="/" className="pl-4">
<i className="bx bxl-instagram text-2xl text-white hover:text-yellow"></i>
</a>
</div>
</div>
</div>
</div>
)
}
export async function getServerSideProps(context) {
const client = createClient({
projectId: "xxxxxxxx",
dataset: "production",
apiVersion: '2022-02-03',
useCdn: false
});
const query = `*[_type == "blog"]`;
const blogs = await client.fetch(query)
const profileQuery = `*[_type == "profile"][0]`;
const profile = await client.fetch(profileQuery)
return {
props: {
blogs, profile
},
}
}
export default BlogPostblogPost文件夹有一个[slug].js文件。[slug].js：
import { createClient } from 'next-sanity'
import Head from 'next/head'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import PortableText from 'react-portable-text'
import Navbar from '../../components/NavBar'
const Slug = ({ blog, profile }) => {
const [date, setDate] = useState()
useEffect(() => {
const date = new Date(blog.createdAt)
setDate(date)
}, [])
return (
<>
<div>
<Navbar profile={profile}/>
<Head>
<title>{blog && blog.title}</title>
</Head>
<div>
<div className="container py-6 md:py-10 mt-16">
<div className="mx-auto max-w-4xl">
<div>
<h1 className="pt-5 font-body text-3xl font-semibold text-primary sm:text-4xl md:text-5xl xl:text-6xl">{blog && blog.title}</h1>
<div className="flex items-center pt-5 md:pt-10">
<div>
<img src="/Abhirup_animated_logo.jpeg" className="h-20 w-20 rounded-full border-2 border-grey-70 shadow" alt="author image" />
</div>
<div className="pl-5">
<span className="block font-body text-xl font-bold text-grey-10">By {profile.name}</span>
<span className="block pt-1 font-body text-xl font-bold text-grey-30">{date && date.toLocaleDateString("en-GB", { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
</div>
</div>
</div>
<div className="prose max-w-none pt-8">
{blog && <PortableText
// Pass in block content straight from Sanity.io
content={blog.content}
projectId="xxxxxxx"
dataset="production"
// Optionally override marks, decorators, blocks, etc. in a flat
// structure without doing any gymnastics
serializers={{
h1: (props) => <h1 style={{ color: "black" }} {...props} />,
img: ({ children }) => <img className="w-full">{ children }</img>,
li: ({ children }) => <li className="special-list-item">{ children }</li>
}}
/>}
</div>
<div className="mt-10 flex justify-between border-t border-lila py-12">
<Link href={"/blogs"}><a className="flex items-center">
<i className="bx bx-left-arrow-alt text-2xl text-primary"></i>
<span className="block pr-2 font-body text-lg font-bold uppercase text-primary md:pr-5">Checkout More Blogs</span>
</a>
</Link>
</div>
<div
className="flex flex-col items-center border-t border-lila py-12 pt-12 md:flex-row md:items-start xl:pb-20">
<div className="w-3/4 sm:w-2/5 lg:w-1/4 xl:w-1/5">
<img src="/Abhirup_animated_logo.jpeg" className="rounded-full shadow" alt="author image" />
</div>
<div className="ml-0 text-center md:ml-10 md:w-5/6 md:text-left">
<h3 className="pt-10 font-body text-2xl font-bold text-secondary md:pt-0">
Abhirup Kumar Bhowmick
</h3>
<p
className="pt-5 font-body text-lg leading-8 text-secondary sm:leading-9 md:text-xl md:leading-9 lg:leading-9 xl:leading-9">
Hey guys, I'm a 2nd year CSE undergrad student. I am really interested in freelancing and passionate about making new softwares which adds values to peoples life. I write blogs which might help you discover new aspects of various technologies.
</p>
<div className="flex items-center justify-center pt-5 md:justify-start">
<a href="/">
<i className="bx bxl-facebook-square text-2xl text-primary hover:text-yellow"></i>
</a>
<a href={profile.linkedinlink} className="pl-4">
<i className="bx bxl-linkedin text-2xl text-primary hover:text-yellow"></i>
</a>
<a href="/" className="pl-4">
<i className="bx bxl-instagram text-2xl text-primary hover:text-yellow"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="bg-primary">
<div className="container flex flex-col justify-between py-6 sm:flex-row">
<p className="text-center font-body text-white md:text-left">
© Copyright 2022. All rights reserved.
</p>
<div className="flex items-center justify-center pt-5 sm:justify-start sm:pt-0">
<a href="/">
<i className="bx bxl-facebook-square text-2xl text-white hover:text-yellow"></i>
</a>
<a href={profile.linkedinlink} className="pl-4">
<i className="bx bxl-linkedin text-2xl text-white hover:text-yellow"></i>
</a>
<a href="/" className="pl-4">
<i className="bx bxl-instagram text-2xl text-white hover:text-yellow"></i>
</a>
</div>
</div>
</div>
</div >
</>
)
}
export async function getServerSideProps(context) {
// It's important to default the slug so that it doesn't return "undefined"
const { slug } = context.query
const client = createClient({
projectId: "xxxxxxx",
dataset: "production",
apiVersion: '2022-02-03',
useCdn: false
});
const query = `*[_type == "blog" && slug.current == "${slug}"][0]`;
const blog = await client.fetch(query)
const profileQuery = `*[_type == "profile"][0]`;
const profile = await client.fetch(profileQuery)
return {
props: {
blog, profile
}
}
}
export default Slug我给出 * 而不是projectId只是为了隐私;）
我已经部署了我的sanity studio，还添加了www.example.com的CORS源上的网站链接sanity.io，但无论何时我试图打开博客页面时，仍然（https://abhirupkumar.vercel.app/blogs）显示应用程序错误。当我运行我的localhost时，我没有得到任何错误，页面工作正常。我甚至在sanity.json中添加了basePath作为“/studio”，并在sanity中部署了它。但我仍然不知道“我不知道为什么它不工作。当我在localhost运行sanity时，博客页面是工作的，但在停止localhost后，页面不工作。我已经部署了sanity，那么为什么会发生这个错误。
Image of error while loading the pages
如何解决这个问题？
1条答案
按热度按时间ca1c2owp1#
第一个错误表明您试图直接使用
slug（它是一个对象），而不是slug.current（它是一个字符串）。第二个错误表明当
blog仍然为空时，页面正在被呈现。您需要确保在获取返回数据之前不呈现页面。