nextjs-custom-server
es-module-shims
nextjs-custom-server | es-module-shims | |
---|---|---|
11 | 13 | |
160 | 1,486 | |
- | - | |
2.7 | 6.5 | |
10 months ago | 7 days ago | |
TypeScript | JavaScript | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
nextjs-custom-server
- Best options for a react framework + headless cms
-
Build a notification system for a blog site with React, NodeJS and Novu 🚀
With MongoDB out of the way, first, create a new repository using a template at payloadcms/nextjs-custom-server, and clone that to your local machine. Unlike forking, creating a new repository from a template resets the commit history and disassociate it from an original template repository.
-
Modern SPAs without bundlers, CDNs, or NodeJS
For example this repo says you can install with npm install and you will end up with both.
- Are you still using headless WP? If so, why?
- What headless CMS should I use to build a blog that I can query data from a Next.js app?
-
Launch HN: Payload (YC S22) – Headless CMS for Developers
Next.js works great with Payload. One cool feature of Payload is the Local API, which works awesome for server side rendered pages. You get your data from Payload right in your `getServerSideProps` functions.
You'd be interested in the example repo: https://github.com/payloadcms/nextjs-custom-server
The example is set up to manage Pages, but with a few tweaks you'd be able to manage blogs posts instead.
-
Headless CMS: possible alternatives to Flotiq?
I recommend Payload CMS for simple sites and complex apps alike. Check out the next.js starter we have up to get server side rendering for a boilerplate website. https://github.com/payloadcms/nextjs-custom-server
- NextJS, Payload, and TypeScript in a Single Express Server Boilerplate
-
Balancing Flexibility and Productivity in Your CMS
Check out payloadcms.com. We just created a new NextJS boilerplate if that is the direction you want to take for the frontend https://github.com/payloadcms/nextjs-custom-server.
-
Wordpress/CMS alternative? Should I even consider Python?
We just added a boilerplate that gives you a nice next.js starting point too so you can do get a frontend fast also! https://github.com/payloadcms/nextjs-custom-server
es-module-shims
-
⏰ It’s time to talk about Import Map, Micro Frontend, and Nx Monorepo
For full compatibility and extra features, we usually use the library es-module-shims.
-
JavaScript import maps are now supported cross-browser
You can polyfill for unsupported browsers, it works surprisingly well: https://github.com/guybedford/es-module-shims
-
Modern SPAs without bundlers, CDNs, or Node.js
https://github.com/guybedford/es-module-shims has a polyfill. (But it is fairly large: 53KB raw, 15KB gzipped, 32KB minified, 11KB minified+gzipped. It’s providing a lot of likely-unnecessary functionality. I’d prefer a stripped-down polyfill that can also be lazily-loaded, controlled by a snippet of at most a few hundred bytes that you can drop into the document, only loading the polyfill in the uncommon case that it’s needed—like how five years ago as part of modernising some of the code of Fastmail’s webmail, I had it fetch and execute core-js before loading the rest iff !Object.values (choosing that as a convenient baseline), so that the cost to new browsers of supporting old browsers was a single trivial branch, and maybe fifty bytes in added payload.)
- Writing JavaScript without a build system
-
Modern SPAs without bundlers, CDNs, or NodeJS
If we call the shim a framework, would you be ok with it then?
-
Import maps 101
If you want import maps to be supported in any browser, there is an ES Module Shims polyfill which is compatible with any browser that has baseline ES Module Support (i.e. Edge 17+, Firefox 60+, Safari 10.1+, and Chrome 61+).
-
Everything You Need to Know About JavaScript Import Maps
An example of a polyfill that can be used is the ES Module Shims polyfill that adds support for import maps and other new module features to any browser with baseline support for ES modules (about 94% of browsers). All you need to do is include the es-module-shim script in your HTML file before your import map script:
-
How bad is it to not use a bundler?
i often use es-module-shims so i can load npm packages in browsers without a bundler 😎
-
Fresh – The next-gen web framework
I explored using client-side service workers for build-less deployment workflows a while back, but the blocker was the initial visit when the service worker hasn't been installed yet. Ended up using es-module-shim's fetch hook (https://github.com/guybedford/es-module-shims#fetch-hook) instead, which worked quite well.
I kept the demo repo around here, in case it's helpful to anyone: https://github.com/lewisl9029/buildless-hot-reload-demo.
The repo itself is quite out of date at this point, but my current project, Reflame, is essentially the spiritual successor: https://reflame.app/
Reflame has the same ideals of achieving the developer experience I've always wanted for building client rendered React apps:
- instant production deployments (usually <200ms)
- instant preview environments that match production in pretty much every imaginable way (including the URL), that can also be flipped into development mode for fast-refresh (for the seamless feedback loop we're used to in local dev) and dev-mode dependencies (for better error messaging, etc)
- close-to-instant browser tests (1-3 seconds) that enable image snapshot comparisons that run with maximum parallelism and only rerun when their dependency graphs change
-
Do you use Import-Map for your client-side ESM?
The problem of course is that browser-support for Import Maps is sadly lacking (only Chrome/Chromium-based at time of writing). There are tricks/shims to get around this, like ES-Module-Shims. I find these approaches to be a little too intrusive, personally.
What are some alternatives?
Directus - The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
import-maps - How to control the behavior of JavaScript imports
payload - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
hyperscript - Create HyperText with JavaScript.
next-web3-boilerplate - Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.
Rust Language Server - Repository for the Rust Language Server (aka RLS)
awesome-headless-cms - An awesome list of headless / decoupled CMS resources.
stampino-element
keeptrack.space - 🌎📡 TypeScript Astrodynamics Software for Non-Engineers. 3D Visualization of satellite data and the sensors that track them.
import-remap - Rewrite ES module import specifiers using an import-map.
mercury - A truly modular frontend framework
codesandbox-client - An online IDE for rapid web development