Next.js静态导出页面重载时getInitialProps未触发相关问题求助

问题1：是否存在无需使用.html后缀即可实现静态页面正常重载的方案？ #

存在，具体配置方式如下：

• 在项目根目录的next.config.js中添加配置项trailingSlash: true，执行next export导出静态站点时，Next.js会自动将每个页面生成为对应目录下的index.html文件，例如/about页面会导出为about/index.html，部署后直接访问/about路径即可正常加载，刷新也不会出现404。
• 如果你使用自定义Nginx部署，只需在Nginx配置中添加规则try_files $uri $uri.html $uri/ =404;，无需修改Next.js配置也能实现无.html后缀访问。

问题2：有没有方法可以保证静态站点导出后、页面重载时仍然会触发getInitialProps()方法？ #

next export生成的纯静态站点不支持页面重载时触发getInitialProps，这个方法仅会在构建导出阶段运行一次，用于生成预渲染的静态HTML内容，导出完成后没有服务端逻辑来触发它执行。
如果需要保留原getInitialProps中的逻辑，直接将对应代码迁移到客户端生命周期即可：函数组件迁移到useEffect钩子中，类组件迁移到componentDidMount生命周期中，页面客户端挂载后会自动执行对应逻辑。

问题3：由于Next.js似乎无法直接访问顶层window对象，是否有其他方式可以从浏览器URL中获取query string？ #

有两种常用的可靠方案：

• 优先使用Next.js内置的useRouter钩子获取，示例代码如下：

import { useRouter } from 'next/router'
import { useEffect } from 'react'

function DemoPage() {
  const router = useRouter()
  // 等待路由初始化完成后再读取query，避免静态导出场景下拿到空值
  useEffect(() => {
    if(router.isReady) {
      const queryParams = router.query
      // 此处即可拿到所有query参数
    }
  }, [router.isReady])
}

• 直接读取浏览器window对象，只需加一层环境判断避免构建阶段报错即可：

if(typeof window !== 'undefined') {
  const queryString = window.location.search
  // 可配合URLSearchParams解析具体参数
  const searchParams = new URLSearchParams(queryString)
  const id = searchParams.get('id')
}

内容的提问来源于stack exchange，提问作者MoO