尽管页面中的其他详细信息工作正常，但无法从公共文件夹中获取图像

Question

职员身份验证抛出以下错误： ⨯ 错误：Clerk：调用了 auth()，但 Clerk 无法检测到 authMiddleware() 的使用。请确保以下事项：

• authMiddleware() 用于您的 Next.js 中间件。
• 您的中间件匹配器已配置为匹配此路由或页面。
• 如果您使用 src 目录，请确保中间件文件位于其中。

但是我已经验证我遵循了所有这些步骤，现在我的身份验证正在这个特定的路线上定义一个匿名成员，这使得它无法获取图像。

我希望显示的图像没有任何错误，并且在以下路由中也不会抛出任何身份验证错误。

Answer 1

我将展示一个标准解决方案 NextJs/Clerk 代码，您可以按照它来修复错误：（无法加载资源：服务器响应状态为 500（内部服务器错误））：

import { useEffect, useState } from 'react';
import { authMiddleware } from 'clerk';

const SomePage = () => {
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const response = await fetch('/api/images', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            // here you must include Clerk authentication token (if available)
            Authorization: `Bearer ${YOUR_CLERK_TOKEN}`,
          },
        });
        if (response.ok) {
          const data = await response.json();
          setImages(data.images);
        } else {
          console.error('Failed to fetch images:', response.statusText);
        }
      } catch (error) {
        console.error('Error fetching images:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchImages();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading images...</p>
      ) : (
        <div>
          {images.map((image) => (
            <img key={image.id} src={image.url} alt={image.alt} />
          ))}
        </div>
      )}
    </div>
  );
};

export const getServerSideProps = async ({ req, res }) => {
  // add Clerk authMiddleware to authenticate requests here
  await authMiddleware(req, res);

  return {
    props: {},
  };
};

export default SomePage;