时间戳

首页 > 解决方案 > 在 Next.js 页面中检索子域

javascript - 在 Next.js 页面中检索子域

问题描述

我有一个pages/index.tsxNext.js 页面，其代码如下所示：

import { ApolloProvider } from "@apollo/react-hooks"
import Client from "../db"

import Header from "../components/Header"

export default function Index() {
    return <ApolloProvider client={Client}>
        <Header langKey={langKey} />
    </ApolloProvider>
}

问题是，langKey应该是访问页面的子域（例如，en.localhost:3000或fr.localhost:3000;langKey将是en或fr）。如何从 Next.js 上下文中检索此信息？我尝试了 Router 对象，但它看起来不像在第一个/.

标签： javascriptreactjstypescriptnext.jsreact-typescript

解决方案

在getInitialProps生命周期方法（doc's here）上，您可以访问服务器端的请求对象并解析主机标头。

Index.getInitialProps = async ({ req }) => {
  const subdomain = req.headers.host.split('.')[0];
  return { langkey: subdomain };
};

如果仅在客户端需要此信息，您可以使用以下方法轻松解析window.location生命周期方法中的某个位置：window.location.host.split('.')[0].

希望有帮助！

推荐阅读