The issue at hand
To elaborate on the problem, when I execute next dev with the following code:
window.localStorage.getItem('myCat')
An error is thrown:
ReferenceError: window is not defined
The goal is to have a live reloaded development environment.
Resolved in production, yet remains unresolved in development
A feasible production workaround for this issue includes:
- Avoid using getStaticProps/
getStaticPaths next build && next export- Implement nginx rewrite rules to map
/some/routeto ->/some/[dynamic].html - Next.js takes care of the rest, enabling dynamic routes at runtime even with a completely static site
Synopsis
This query essentially pertains to the development counterpart of the aforementioned issue: how can we achieve live reload functionality with a static Next.js site? Although this isn't officially supported, I am hopeful that someone with deeper webpack expertise could provide guidance.
Exploring possible solutions
My approach involved leveraging these tools:
- custom webpack config for next: utilized for various purposes as listed below
- shimming the window object (assuming node environment is still active, but also experimented with window-shim)
- a custom next.js dev server, however, the available options do not seem to address the issue at hand. While URL rewriting could be implemented as demonstrated in their example, I considered using the aforementioned next.config.js webpack config for that purpose as well