Migrate nextjs demo

Author: simolus3

demos/example-nextjs/package.json

@@ -3,11 +3,11 @@
   "version": "0.1.15",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "next build --webpack",
     "clean": "rm -rf .next",
-    "watch": "next dev",
+    "watch": "next dev --webpack",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint",
     "test:build": "pnpm build"
   },
   "dependencies": {

demos/example-nextjs/src/app/page.tsx

@@ -13,7 +13,8 @@ const EntryPage = () => {
     return (
       <S.MainGrid container>
         <p>
-          Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly. Check the console for issues.
+          Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly.
+          Check the console for issues.
         </p>
         <CircularProgress />
       </S.MainGrid>
@@ -39,7 +40,7 @@ const EntryPage = () => {
           <p>You currently have no customers. Please connect PowerSync to your database to see them sync down.</p>
         </S.CenteredGrid>
       ) : (
-        <S.CenteredGrid item xs={12} md={6} lg={5}>
+        <S.CenteredGrid size={{ xs: 12, md: 6, lg: 5 }}>
           <div>
             {customers.map((c) => (
               <ListItem key={c.id}>{c.name}</ListItem>
@@ -52,7 +53,6 @@ const EntryPage = () => {
   );
 };
 
-
 namespace S {
   export const CenteredGrid = styled(Grid)`
     display: flex;

demos/example-nextjs/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,17 +15,27 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }