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

Question

我有一个 pages/index.tsx Next.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 对象，但它看起来不像在第一个 / 之前存储任何 URL 信息.

Answer 1

在 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] .
希望有帮助!