Nextjs博客网站应用程序错误:发生了客户端异常(有关更多信息，请参见浏览器控制台)

Question

我在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 BlogPost

blogPost文件夹有一个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.io的CORS起源网站链接，但仍然每当我试图打开博客页面(https://abhirupkumar.vercel.app/blogs)应用程序错误显示。当我运行本地主机时，我没有收到任何错误，并且页面运行良好。我甚至在basePath中将/studio添加为"/studio“，并在正常情况下进行了部署。但我还是不知道为什么不管用。当我在本地主机上运行时，博客页面就会正常工作，但是在停止本地主机之后，页面就不能工作了。我已经部署了理智，那么为什么会发生这个错误。

加载页面时出现的错误图像

怎么解决这个问题？

Answer 1

第一个错误表明您试图直接使用slug (它是一个对象)，而不是slug.current (它是一个字符串)。

第二个错误表明，当blog仍然为null时，您的页面正在呈现。您需要确保在fetch返回数据之前没有呈现页面。