[JavaScript] #yyds干货盘点# Next.js通配符子域

快速总结 ↬ 使用通配符子域的主机使你的用户能够在你的域名（<em>.example.com）的任何子域上访问你的网站，正如你所想象的，我们可以利用这一点来创造独特的用户体验，我们将在本文中通过Next.js镜头来探索。

*.example.         3600   TXT   "Wild! You have found a wildcard."

• 不再有静态站点生成（和ISR）
  不幸的是，没有任何特殊的系统可以为不同的通配符子域提供定制的静态生成的页面，比如你可以用动态路由（你有[slug].js文件）。
  
• 发展方面的困难
  在本地开发时，模拟通配符域名可能是件麻烦事，我们将在本文的后面部分触及这个问题，但这是需要牢记的事情。
  
• 有限的部署平台
  Vercel支持通配符域名，然而，其他面向Jamstack的平台并不都支持通配符域名。例如，Netlify将该功能限制在专业计划的特定用户群中。
  

async function getServerSideProps(context) {
  let wildcard = context.req.headers.host.split(".")[0];
  wildcard =
  wildcard != "yourdomain"
    ? process.env.NODE_ENV != "development"
    ? wildcard
    : process.env.TEST_WILDCARD
    : "home";
  return { props: { wildcard } };
}

default function App(props) {
  switch(props.wildcard) {
  case "home":
    return <div>Welcome to the home page!</div>;
    break;
  default:
    return <div>The wild card is: {props.wildcard}.</div>;
  }
}

// useEffect and useState must be imported from 'react'
const [wildcard, setWildcard] = useState("")
  useEffect(() => {
  setWildcard(window.location.hostname.split(".")[0])
  }, [])

default (req, res) => {
  let wildcard = req.headers.host.split(".")[0];
  wildcard =
  wildcard != "yourdomain"
    ? process.env.NODE_ENV != "development"
    ? wildcard
    : process.env.TEST_WILDCARD
    : "home";
  res.json({ wildcard: wildcard })
}

// _middleware.js
export function middleware(req) {
  let wildcard = req.headers.get("host").split(".")[0];
  console.log(wildcard);
  wildcard =
  wildcard != "yourdomain"
    ? process.env.NODE_ENV != "development"
    ? wildcard
    : process.env.TEST_WILDCARD
    : "home";
  console.log(process.env.TEST_WILDCARD);
  return new Response(JSON.stringify({ wildcard: wildcard }), {
  status: 200,
  headers: { "Content-Type": "application/json" },
  });
}