乐闻世界logo
搜索文章和话题

Nextjs 项目如何获取页面 url 或 host ?

5 个月前提问
21 天前修改
浏览次数561

6个答案

1
2
3
4
5
6

在 Next.js 项目中,您可以通过几种不同的方式获取当前页面的 URL 或 host。以下是一些通用方法:

在服务器端(getServerSideProps 或 API 路径中)

在 Next.js 的服务器端代码中,例如在 getServerSideProps 或 API 路径中,您可以直接从请求对象中获取 host 和完整 URL。

jsx
export async function getServerSideProps(context) { const { req } = context; const host = req.headers.host; // 获取 host const protocol = req.headers['x-forwarded-proto'] || 'http'; // 注意:在 Vercel 或其他云服务上部署时,使用 'x-forwarded-proto' 头来确定协议可能更为准确。 const fullUrl = `${protocol}://${host}${req.url}`; // 获取完整 URL return { props: {}, // 将所需数据作为 props 传递给页面 }; }

注意:req.url 仅包含 URL 的路径和查询字符串,而不包含协议和主机名。

在客户端(使用 useRouter 或 window 对象)

在客户端,您可以使用 Next.js 的 useRouter 钩子或浏览器的 window 对象来获取当前页面的 URL。

使用 useRouter 钩子:

jsx
import { useRouter } from 'next/router'; const MyComponent = () => { const router = useRouter(); const currentPath = router.asPath; // 获取路由的路径和查询字符串 // 在客户端,可以使用 window 对象获取当前页面的完整 URL const fullUrl = window.location.href; return ( // ... ); }; export default MyComponent;

直接使用 window.location 对象:

jsx
const MyComponent = () => { // 确保在组件加载到浏览器后才使用 window 对象 React.useEffect(() => { const fullUrl = window.location.href; // 使用 fullUrl }, []); return ( // ... ); }; export default MyComponent;

确保在使用 window 对象时,代码被包裹在 useEffect 钩子或任何确保代码在客户端执行的逻辑中,以避免在构建时出现引用错误。

使用 Next.js 的 Head 组件动态设置元信息

如果您想要在页面的 <head> 标签中使用 URL 或 host,您可以使用 Next.js 的 Head 组件在服务器端渲染时动态添加元信息。

jsx
import Head from 'next/head'; import { useRouter } from 'next/router'; const MyPage = () => { const router = useRouter(); const currentPath = router.asPath; return ( <> <Head> <link rel="canonical" href={`https://yourdomain.com${currentPath}`} /> </Head> {/* 页面内容 */} </> ); }; export default MyPage;

在这个示例中,<link rel="canonical"> 标签被设置为当前页面的完整 URL,假设您已知您的域名。如果域名未知或变化,您可能需要将其作为配置参数传递或从服务器端代码中获取。

获取动态路由参数

如果您的页面路径包含动态路由参数,如 [id].js,您可以使用 useRouter 钩子或 getServerSideProps 函数中的 context 对象来获取这些参数。

使用 useRouter 钩子:

jsx
const MyComponent = () => { const router = useRouter(); const { id } = router.query; // 获取动态路由参数 // ... };

getServerSideProps 中:

jsx
export async function getServerSideProps(context) { const { params } = context; const { id } = params; // 获取动态路由参数 // ... }

使用这些参数,您可以构建相关联的 URL 或在页面中使用这些值。

总之,获取当前页面的 URL 或 host 可以根据运行上下文(服务器端或客户端)和您的特定需求采取不同的方式

2024年6月29日 12:07 回复

如果您想要服务器端 getInitialProps 中的主机名,您仍然可以从 req 获取它

shell
Home.getInitialProps = async(context) => { const { req, query, res, asPath, pathname } = context; if (req) { let host = req.headers.host // will give you localhost:3000 } }
2024年6月29日 12:07 回复

通过服务器端渲染 ( getServerSideProps),您可以使用context.req.headers.host

shell
import type { GetServerSideProps, NextPage } from "next"; type Props = { host: string | null }; export const getServerSideProps: GetServerSideProps<Props> = async context => ({ props: { host: context.req.headers.host || null } }); const Page: NextPage<Props> = ({ host }) => <p>Welcome to {host || "unknown host"}!</p>; export default Page;

但使用静态生成 ( getStaticProps) 时,主机名不可用,因为没有请求从中获取主机名。一般来说,服务器不知道自己的公共主机名,因此您需要告诉它。使用Next.js 环境变量,将其放入.env.local

shell
HOST=example.com

然后使用以下命令访问它process.env['HOST']

shell
import type { GetStaticProps } from "next"; export const getStaticProps: GetStaticProps<Props> = async context => ({ props: { host: process.env['HOST'] || null }});
2024年6月29日 12:07 回复

如果你想获取完整的 URL:

shell
import { useRouter } from 'next/router'; const { asPath } = useRouter(); const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''; const URL = `${origin}${asPath}`; console.log(URL);
2024年6月29日 12:07 回复

您访问的位置请window确保添加检查,以便代码仅在浏览器上执行,而不会在 SSG 期间执行”

shell
if (typeof window !== 'undefined') { const hostname = window.location.hostname; }

更新:如果您已basePath指定next.config.js

shell
module.exports = { basePath: 'https://www.example.com/docs', }

然后使用useRouter,您可以访问基本路径:

shell
import { useRouter } from 'next/router' function Component() { const router = useRouter(); console.log({ basePath: router.basePath}); // { basePath: 'https://www.example.com/docs' } ... }

但是如果您有相对基本路径,那么您可以使用第一种方法

2024年6月29日 12:07 回复

根据此处提到的答案,您可以使用以下代码使用新的应用程序目录(对于服务器端组件)获取 Next 13 中的主机名:

shell
import { headers } from 'next/headers'; export default function Home() { const headersList = headers(); headersList.get('host'); // to get domain headersList.get('next-url'); // to get url return <div>....</div> }

注意:请注意,在布局或页面中使用它会在请求时选择一条进入动态渲染的路线

2024年6月29日 12:07 回复

你的答案