[labs/nextjs] Add Next.js plugin for Lit SSR (#3613)

.changeset/happy-insects-fail.md

@@ -0,0 +1,7 @@
+---
+'@lit-labs/nextjs': minor
+---
+
+Initial release of `@lit-labs/nextjs` package.
+
+This package contains a plugin for Next.js that enables deep server rendering of Lit components.

.eslintignore

@@ -232,6 +232,8 @@ packages/labs/motion/index.*
 packages/labs/motion/animate.*
 packages/labs/motion/position.*
 packages/labs/motion/animate-controller.*
+packages/labs/nextjs/index.*
+
 packages/labs/observers/development/
 packages/labs/observers/test/
 packages/labs/observers/node_modules/

.eslintrc.json

@@ -100,12 +100,6 @@
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }
-    },
-    {
-      "files": ["examples/**"],
-      "rules": {
-        "import/extensions": "off"
-      }
     }
   ]
 }

.prettierignore

@@ -219,6 +219,8 @@ packages/labs/motion/index.*
 packages/labs/motion/animate.*
 packages/labs/motion/position.*
 packages/labs/motion/animate-controller.*
+packages/labs/nextjs/index.*
+
 packages/labs/observers/development/
 packages/labs/observers/test/
 packages/labs/observers/node_modules/

examples/nextjs/.eslintrc.json

@@ -1,3 +1,4 @@
 {
+  "root": true,
   "extends": "next/core-web-vitals"
 }

examples/nextjs/README.md

@@ -3,6 +3,5 @@
 This is a barebones demonstration of a Web Component authored with Lit working
 in a Next.js project. You can also see an example of `@lit-labs/react` usage.
 
-These components are shallowly rendered on the server, i.e. only the host
-element tag will be server-rendered. When client-side JS is loaded, the
-components will be upgraded with its contents rendered, and become interactive.
+It uses the plugin from `@lit-labs/nextjs` to enable deep server rendering of
+Lit components.

examples/nextjs/next.config.js

@@ -1,7 +1,9 @@
+const withLitSSR = require('@lit-labs/nextjs')();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 };
 
-module.exports = nextConfig;
+module.exports = withLitSSR(nextConfig);

examples/nextjs/package.json

@@ -9,12 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@lit-labs/nextjs": "file:../../packages/labs/nextjs",
+    "@lit-labs/react": "file:../../packages/labs/react",
     "@types/node": "18.11.11",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
-    "@lit-labs/react": "file:../../packages/labs/react",
     "lit": "file:../../packages/lit",
     "next": "13.0.6",
     "react": "18.2.0",

examples/nextjs/src/simple-greeter.ts

@@ -56,7 +56,6 @@ declare global {
     'simple-greeter': SimpleGreeter;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       'simple-greeter':