在 NextJs 和 Strapi 中打开外部 URL

Question

目前，我正在尝试将用户重定向到一个特定的 link，该 link 在我的 CMS 中作为数据值填写，在我的例子中是 Strapi。我正在使用 <a href> 来重定向用户，但这样做会将我带到 URL http://localhost:3000/www.google.com。如何从我的 URL 中删除本地主机部分。此外，我也尝试过使用 next/link，但我得到了相同的输出。

目前这是我的代码：

<a href={item.LinkedIn} target="_blank">
                            <img
                              style={{
                                height: "20px",
                                width: "20px",
                                backgroundColor: "white",
                              }}
                              src="linkedin.svg"
                            />
</a>

Answer 1

您的代码似乎是正确的。您可以检查 item.LinkedIn 中的值吗？如果是http://localhost:3000/www.google.com，尝试只通过www.google.com和split.

在 .env.local 文件中设置 VERCEL_URL=http://localhost:3000，

然后

host_url = `${process.env.VERCEL_URL}/`
<a href={`${item.LinkedIn.split(host_url)[1]}`} target="_blank"></a>

注：

VERCEL_URL 将自动在 Vercel 中用于预览和生产环境 doc
最好为重定向到新 window

rel="noopener"

在 NextJs 和 Strapi 中打开外部 URL

Opening an external URL in NextJs and Strapi

strapi

next.js