https://github.com/mfellner/static-nextjs-without-js
Generate a static Next.js site that can deactivate (almost) all JavaScript
https://github.com/mfellner/static-nextjs-without-js
nextjs static
Last synced: about 1 month ago
JSON representation
Generate a static Next.js site that can deactivate (almost) all JavaScript
- Host: GitHub
- URL: https://github.com/mfellner/static-nextjs-without-js
- Owner: mfellner
- License: mit
- Created: 2021-03-15T19:06:01.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-15T19:42:11.000Z (about 4 years ago)
- Last Synced: 2025-05-08T03:56:20.592Z (about 1 month ago)
- Topics: nextjs, static
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Static Next.js without JavaScript
Generate a static Next.js site that deactivates (almost) all JavaScript when the query parameter `no_script` is set.
Based on [Kitty's](https://twitter.com/KittyGiraudel) original article: [Error recovery with Next](https://kittygiraudel.com/2021/03/15/error-recovery-with-next/)
## Background
Sometimes it can be useful to exclude JavaScript from a page completely, for example, if the scripts result in errors for a user for some reason. However, it is difficult to do this dynamically with a static site, unless there is a server-side solution that can render different HTML.
## Idea
Like Kitty's original solution, this approach is also based on some client-side JavaScript that checks if the `no_script` query parameter is set. If it is not set, the Next.js scripts are injected into the page dynamically. These steps make it all work:
1. During static rendering, the Next.js scripts are extracted as strings.
2. The strings are escaped (using URL encoding) and placed inside a custom script tag.
3. This custom script parses the original script tags and inserts them into the DOM.
### Caveats:
The solution still depends on JavaScript, obviously.
It's necessary to use `appendChild` to add the tags. When simply appending the tag-strings to `body.innerHTML`, the scripts won't execute.
As a result, some non-trivial logic based on `DOMParser` and `createElement` is necessary.
Unless NextHead is customized somehow, there will still be link tags in the page's head that reference and pre-load the scripts.