Update example/with-typescript-nextjs to latest version of the drivers #64

Author: gionatamettifogo

examples/with-plain-javascript.zip

@@ -1,5 +1,5 @@
 //
-// Using @sqlitecloud/drivers with plain Javascript
+// app.js - example of @sqlitecloud/drivers using Javascript in Node.js
 //
 
 var sqlitecloud = require('@sqlitecloud/drivers')
@@ -14,7 +14,7 @@ async function selectTracks() {
 
   // run async query
   var tracks = await database.sql`USE DATABASE chinook.sqlite; SELECT * FROM tracks LIMIT 20;`
-  console.log(`getTracks returned:`, tracks)
+  console.log(`selectTracks returned:`, tracks)
 
   // You can also use all the regular sqlite3 api with callbacks, see:
   // https://docs.sqlitecloud.io/docs/sdk/js/intro

examples/with-plain-javascript/app.js

@@ -1,2 +1,2 @@
 # connection string for chinook.db on sqlitecloud.io
-CHINOOK_URL="sqlitecloud://user:password@host.sqlite.cloud:8860/chinook.db"
+DATABASE_URL="sqlitecloud://user:password@host.sqlite.cloud:8860"

examples/with-typescript-nextjs/.env.example

@@ -6,7 +6,7 @@ First, run the development server:
 npm run dev
 ```
 
-Open [http://localhost:3000/api/hello](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000/api/hello](http://localhost:3000/api/hello) with your browser to see the result.
 
 You can start editing the API route by modifying `app/api/hello/route.ts`. The page auto-updates as you edit the file.
 

examples/with-typescript-nextjs/README.md

@@ -2,21 +2,21 @@
 // GET /api/hello - example API route using sqlitecloud-js
 //
 
-import { NextRequest, NextResponse } from "next/server";
-import { Database } from "sqlitecloud-js";
+import { NextRequest, NextResponse } from 'next/server'
+import { Database } from '@sqlitecloud/drivers'
 
 // connection string is defined in .env file
-const CHINOOK_URL = process.env.CHINOOK_URL as string;
-console.assert(CHINOOK_URL, "Please configure a .env file with CHINOOK_URL pointing to the chinook database, see .env.example");
+const DATABASE_URL = process.env.DATABASE_URL as string
+console.assert(DATABASE_URL, 'Please configure a .env file with DATABASE_URL pointing to the chinook database, see .env.example')
 
 // route for /api/hello
 export async function GET(request: NextRequest) {
   // connect to database using connection string provided in https://dashboard.sqlitecloud.io/
-  const database = new Database(CHINOOK_URL);
+  const database = new Database(DATABASE_URL)
 
   // retrieve rows from chinook database using a plain SQL query
-  const tracks = await database.sql`SELECT * FROM tracks LIMIT 20`;
+  const tracks = await database.sql`USE DATABASE chinook.sqlite; SELECT * FROM tracks LIMIT 20;`
 
   // return as json response
-  return NextResponse.json<{data: any}>({ data: tracks });
+  return NextResponse.json<{ data: any }>({ data: tracks })
 }

examples/with-typescript-nextjs/app/api/hello/route.ts

@@ -178,11 +178,7 @@
     border-radius: 0;
     border: none;
     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
+    background: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5));
     background-clip: padding-box;
     backdrop-filter: blur(24px);
   }
@@ -193,11 +189,7 @@
     inset: auto 0 0;
     padding: 2rem;
     height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
     z-index: 1;
   }
 }

examples/with-typescript-nextjs/app/page.module.css

@@ -5,90 +5,7 @@ export default function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+        next.js json route: <a href="/api/hello">app/api/hello/</a>
       </div>
     </main>
   )