{"id":48152663,"url":"https://github.com/2wheeh/lexical-nextjs-ssr","last_synced_at":"2026-04-04T17:13:35.522Z","repository":{"id":219120736,"uuid":"748079879","full_name":"2wheeh/lexical-nextjs-ssr","owner":"2wheeh","description":"PoC","archived":false,"fork":false,"pushed_at":"2025-04-01T15:49:09.000Z","size":170,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T16:52:44.772Z","etag":null,"topics":["editor","lexical","nextjs","richtext","rte","ssr"],"latest_commit_sha":null,"homepage":"https://lexical-nextjs-ssr.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2wheeh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-25T08:26:45.000Z","updated_at":"2025-04-01T15:49:13.000Z","dependencies_parsed_at":"2024-05-19T17:27:10.710Z","dependency_job_id":"c2ccbeac-05d2-4958-9bb4-7c1569fa7ba9","html_url":"https://github.com/2wheeh/lexical-nextjs-ssr","commit_stats":null,"previous_names":["2wheeh/lexical-nextjs-ssr"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/2wheeh/lexical-nextjs-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2wheeh%2Flexical-nextjs-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2wheeh%2Flexical-nextjs-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2wheeh%2Flexical-nextjs-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2wheeh%2Flexical-nextjs-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2wheeh","download_url":"https://codeload.github.com/2wheeh/lexical-nextjs-ssr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2wheeh%2Flexical-nextjs-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","lexical","nextjs","richtext","rte","ssr"],"created_at":"2026-04-04T17:13:35.453Z","updated_at":"2026-04-04T17:13:35.508Z","avatar_url":"https://github.com/2wheeh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a simple PoC for running [Lexical](https://github.com/facebook/lexical) on [Next.js](https://github.com/vercel/next.js) to achieve the following:\n- SSR the read mode for SEO.\n    \u003e You can inspect the rendered HTML by the headless editor from the nextjs server in the network tab of your browser's devTools.\n    \u003cimg width=\"930\" alt=\"image\" src=\"https://github.com/2wheeh/lexical-nextjs-ssr/assets/40269597/73b448f6-334b-4381-b8bc-15c13b2ef074\"\u003e\n    \n- Editable on the client side for smooth UX.\n  \n  https://github.com/2wheeh/lexical-nextjs-ssr/assets/40269597/ecf1b914-ae8d-494b-a87e-b2033fb2bf13\n\n\n\n\n### Demo: [lexical-nextjs-ssr.vercel.app](https://lexical-nextjs-ssr.vercel.app)\n\n## Background\nWhile 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](https://lexical.dev/docs/concepts/serialization)). \n\nFor Lexical, I believe that JSON is a better option for the following reasons:\n\nLexical injects the theme through class attributes into the exported/created HTML elements ([lexical-docs-theming](https://lexical.dev/docs/getting-started/theming)).\nIt 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.\n\nSaving 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](https://github.com/TryGhost/Koenig/blob/main/packages/koenig-lexical/src/themes/default.js)) to utilizing it (such as [lexical-playground](https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts)) could break the CSS if you save data as HTML.\n\nFor 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. \n\nThe thing was that previously @lexical/headless and Next.js were not compatible with each other starting from Lexical@0.6.0. However, with the very recent release (v0.13.1), they have become compatible with SSR on Next.js again ([Release Note](https://github.com/facebook/lexical/releases/tag/v0.13.1))!\n\n\n## Getting Started\nFirst, install the packages:\n```bash\nnpm install\n```\n\nThen, run the development server:\n```\nnpm run dev\n```\n\nOpen http://localhost:3000 with your browser.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2wheeh%2Flexical-nextjs-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2wheeh%2Flexical-nextjs-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2wheeh%2Flexical-nextjs-ssr/lists"}