This is a simple PoC for running Lexical on Next.js to achieve the following:
-
SSR the read mode for SEO.
You can inspect the rendered HTML by the headless editor from the nextjs server in the network tab of your browser's devTools.
-
Editable on the client side for smooth UX.
editable-on-client-side.mov
While implementing a service with Lexical, you must decide how to serialize data for saving in a repository. There are several options, but the two main ones are HTML vs JSON (lexical-docs-serialization).
For Lexical, I believe that JSON is a better option for the following reasons:
Lexical injects the theme through class attributes into the exported/created HTML elements (lexical-docs-theming). It provides flexibility when data is separated from the theme. This is why I prefer JSON over HTML for saving data - you can change styling policies and make necessary adjustments in the CSS without affecting the data.
Saving HTML in your repository may seem well-separated as well. However, issues arise for backward compatibility when you want to change the name of a class. Existing data might not be styled correctly. For example, injecting TailwindCSS utility classes directly on theming or changing the strategy from not utilizing theme (such as TryGhost/Keonig) to utilizing it (such as lexical-playground) could break the CSS if you save data as HTML.
For these reasons, you might decide to use JSON. Additionally, you might want to SSR for better UX or SEO. Next.js is probably the most popular framework to achieve this in the current frontend environment.
The thing was that previously @lexical/headless and Next.js were not compatible with each other starting from [email protected]. However, with the very recent release (v0.13.1), they have become compatible with SSR on Next.js again (Release Note)!
First, install the packages:
npm installThen, run the development server:
npm run dev
Open http://localhost:3000 with your browser.