在 NextJs 和 Strapi 中打开外部 URL答案

【问题标题】：Opening an external URL in NextJs and Strapi在 NextJs 和 Strapi 中打开外部 URL
【发布时间】：2021-08-27 21:14:33
【问题描述】：

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

目前这是我的代码：

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

【问题讨论】：

标签： next.js strapi

【解决方案1】：

您的代码似乎正确。你能检查item.LinkedIn中的值吗？如果是http://localhost:3000/www.google.com，请尝试仅通过www.google.com 进行拆分。

在.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
最好为重定向到新窗口的链接添加rel="noopener"

【讨论】：

这实际上给了我一个 /undefined 出于某种原因。我添加了我的输出沙箱：codesandbox.io/s/xenodochial-fog-v6hhr?file=/src/App.tsx
您已指定要从 url 中删除 localhost 部分。因此solution 中的拆分方法。但是在沙盒中，我们只传递了 www.google.com。在这种情况下，不需要拆分。检查this - 没有额外的处理
是的，我打开了你的，你得到了相同的输出，它把你的本地主机放在 www.google.com 之前。我希望 localhost 部分去，所以我可以去实际指定的网站
好的，我想我明白了：D 你需要在链接中添加https，以便锚标签重定向到外部站点。检查this