Next.js编译报错：API返回URL被识别为模块，关联globals.css如何修复？

问题背景 #

我使用Next.js、TypeScript和Tailwind开发网站，原本运行正常。在尝试用Material Tailwind制作卡片后，Next.js编译时返回错误：无法解析'./${i.urlToImage}'模块，导入追踪指向./app/globals.css。但${i.urlToImage}是API返回的有效图片URL（已通过console.log验证），当前使用GitHub Codespaces作为编辑器（适配学校发放的Chromebook）。

错误信息 #

Failed to compile
./app/globals.css:4:0
Module not found: Can't resolve './${i.urlToImage}'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/globals.css
This error occurred during the build process and can only be dismissed by fixing the error.

相关代码 #

API调用组件 #

"use server"

import "dotenv/config";

async function news () {
    const req = await fetch(`https://newsapi.org/v2/everything?q='green energy'&apiKey=${process.env.NEWS_API_KEY}`);
    const resp = await req.json();
    return resp;
};

export default async function News () {
    const data = await news();
 
    return (
        <>
            <h1>Latest News</h1>
            <div className="">
                {data.articles ? (
                    data.articles.map((i: { title: string, url: string, urlToImage: string, description: string, publishedAt: string }) => {
                        return (   
                            <div className="">
                                <a href={i.url}>
                                    <img src={i.urlToImage} alt={i.description}></img>
                                    <h2>{i.title}</h2>
                                    <p>{i.publishedAt}</p>
                                    <p>{i.description}</p>
                                </a>
                            </div>  
                        );
                })) : (
                    <p>Loading...</p>
                )}
            </div>
        </>
    );
};

globals.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply bg-black-50;
    @apply text-white-50;
    overflow-x: hidden;
  }
  h1, h2, h3, p {
    margin-left: 5%;
  }
}

@layer utilities {
  .stroke-text {
    font-weight: bold;
    -webkit-text-stroke: 1px #F6F6F650;
    font-size: 30vw;
    -webkit-text-fill-color: transparent;
  }
}

引入Material Tailwind的代码（报错触发点） #

<>
  <a href={i.url}>
      <Card placeholder="">
          <CardHeader 
              placeholder=""
              className={`absolute inset-0 m-0 h-full w-full rounded-none bg-[url(${i.urlToImage})] bg-cover bg-center`}
          >
              <div className="to-bg-black-50 absolute inset-0 h-full w-full bg-gradient-to-t from-black-50/80 via-black-50/50"></div>
          </CardHeader>
          <CardBody placeholder="">
              <h1>{i.title}</h1>
              <p>{i.publishedAt}</p>
              <p>{i.description}</p>
          </CardBody>
      </Card>
  </a>
</>

已尝试的解决方法 #

• 拆分组件
• 注释globals.css代码（仅注释@tailwind utilities时可编译但样式失效）
• 删除.next目录和tsconfig.json
• 重启服务
• 回滚代码
• 新建Codespace实例

以上操作均无法解决问题。

疑问 #

1. 为什么${i.urlToImage}会被视为模块？
2. 为什么这个问题会影响到CSS文件？
3. 该如何修复这个错误？

内容的提问来源于stack exchange，提问作者S. M. V.