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

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

Next.js
7 个月前提问
3 个月前修改
浏览次数952次

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 回复

你的答案