diff --git a/examples/with-turso/.env.example b/examples/with-turso/.env.example new file mode 100644 index 0000000000000..ae810d3177978 --- /dev/null +++ b/examples/with-turso/.env.example @@ -0,0 +1,2 @@ +TURSO_DB_URL= +TURSO_DB_TOKEN= \ No newline at end of file diff --git a/examples/with-turso/.gitignore b/examples/with-turso/.gitignore new file mode 100644 index 0000000000000..a20081e632df9 --- /dev/null +++ b/examples/with-turso/.gitignore @@ -0,0 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +*.db diff --git a/examples/with-turso/README.md b/examples/with-turso/README.md new file mode 100644 index 0000000000000..e9df475276cb7 --- /dev/null +++ b/examples/with-turso/README.md @@ -0,0 +1,105 @@ +# Turso + +[Turso](https://turso.tech) is a SQLite-compatible database built on libSQL, the Open Contribution fork of SQLite. It enables scaling to hundreds of thousands of databases per organization and supports replication to any location, including your own servers, for microsecond-latency access. + +* [Turso Documentation](https://docs.turso.tech) +* [Turso Support](https://discord.com/invite/4B5D7hYwub) + +## Features + +* Uses SQLite `dev.db` locally +* App Router +* Server Actions + +## How to use + +You can run this example locally using SQLite. The example will automatically create a `todos` table using the file `dev.db`. + +Create a new Next app using the `with-turso` example: + +```bash +npx create-next-app --example with-turso with-turso-app +``` + +```bash +yarn create next-app --example with-turso with-turso-app +``` + +```bash +pnpm create next-app --example with-turso with-turso-app +``` + +Then install the dependencies and run the Next.js development server: + +```bash +npm install +npm run dev + +# or + +yarn install +yarn dev + +# or +# +pnpm install +pnpm dev +``` + +You should now be able to go to [http://localhost:3000](http://localhost:3000). + +## Deploy to Vercel + +You can deploy this app to Vercel in a few simple steps: + +1. **Signup to Turso** + + Install the Turso CLI and login using GitHub: + + ```bash + # macOS + brew install tursodatabase/tap/turso + + # Windows (WSL) & Linux: + # curl -sSfL https://get.tur.so/install.sh | bash + ``` + +2. **Create a database** + + Begin by creating your first database: + + ```bash + turso db create [database-name] + ``` + +3. **Create a table** + + Connect to the turso shell and create your first table: + + ```bash + turso db shell + ``` + + ```bash + CREATE TABLE todos(id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT NOT NULL) + ``` + +4. **Retrieve database URL** + + You'll need to fetch your database URL and assign it to `TURSO_DB_URL` on deployment: + + ```bash + turso db show --url + ``` + +5. **Create database auth token** + + Now create an access token and assign it to `TURSO_DB_TOKEN` on deployment: + + ```bash + turso db tokens create + ``` + +6. **Deploy to Vercel** + + [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-turso&env=TURSO_DB_URL,TURSO_DB_TOKEN) diff --git a/examples/with-turso/app/actions.ts b/examples/with-turso/app/actions.ts new file mode 100644 index 0000000000000..bcb82b7d123af --- /dev/null +++ b/examples/with-turso/app/actions.ts @@ -0,0 +1,23 @@ +"use server"; + +import { revalidatePath } from "next/cache"; + +import { db } from "@/lib/turso"; + +export const addTodo = async (formData: FormData) => { + await db.execute({ + sql: "INSERT INTO todos (description) VALUES (?)", + args: [formData.get("description") as string], + }); + + revalidatePath("/"); +}; + +export const removeTodo = async (formData: FormData) => { + await db.execute({ + sql: "DELETE FROM todos WHERE id = ?", + args: [formData.get("id") as string], + }); + + revalidatePath("/"); +}; diff --git a/examples/with-turso/app/favicon.ico b/examples/with-turso/app/favicon.ico new file mode 100644 index 0000000000000..de856bb96c9ab Binary files /dev/null and b/examples/with-turso/app/favicon.ico differ diff --git a/examples/with-turso/app/form.tsx b/examples/with-turso/app/form.tsx new file mode 100644 index 0000000000000..7cf8be6e33f5a --- /dev/null +++ b/examples/with-turso/app/form.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { useRef } from "react"; +import { useFormStatus } from "react-dom"; + +import { addTodo } from "./actions"; + +function Submit() { + const { pending } = useFormStatus(); + + return ( + + ); +} + +export function Form() { + const formRef = useRef(null); + + formRef.current?.reset(); + + return ( +
{ + await addTodo(formData); + formRef.current?.reset(); + }} + className="rounded-md border border-gray-300 p-3 shadow-sm" + ref={formRef} + > + + + + + ); +} diff --git a/examples/with-turso/app/globals.css b/examples/with-turso/app/globals.css new file mode 100644 index 0000000000000..b5c61c956711f --- /dev/null +++ b/examples/with-turso/app/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/examples/with-turso/app/layout.tsx b/examples/with-turso/app/layout.tsx new file mode 100644 index 0000000000000..4720d49f23259 --- /dev/null +++ b/examples/with-turso/app/layout.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Next.js + Turso", + description: "Next.js Server Actions Demo + Turso", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/examples/with-turso/app/page.tsx b/examples/with-turso/app/page.tsx new file mode 100644 index 0000000000000..ca69df0e3c4da --- /dev/null +++ b/examples/with-turso/app/page.tsx @@ -0,0 +1,19 @@ +import { TodoList } from './todo-list' +import { Form } from "./form"; + +export default function Home() { + return ( +
+ +
+

Turso

+

Local SQLite with libSQL and Turso

+
+ +
+ +
+
+
+ ); +} diff --git a/examples/with-turso/app/todo-list.tsx b/examples/with-turso/app/todo-list.tsx new file mode 100644 index 0000000000000..6fde092274fac --- /dev/null +++ b/examples/with-turso/app/todo-list.tsx @@ -0,0 +1,31 @@ +import { type TodoItem, Todo } from "./todo"; + +import { db } from "@/lib/turso"; + +// The code below can be removed in production apps +// Useful for getting started locally with SQLite +async function findOrCreateTodosTable() { + const result = await db.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='todos'") + + if (!result || result?.rows?.length === 0) { + await db.execute("CREATE TABLE todos(id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT NOT NULL)") + } +} + +export async function TodoList() { + await findOrCreateTodosTable() + const result = await db.execute("SELECT * FROM todos"); + const rows = result.rows as unknown as TodoItem[]; + + if (!result || result?.rows?.length === 0) return null; + + return rows.map((row, index) => ( + + )); +} diff --git a/examples/with-turso/app/todo.tsx b/examples/with-turso/app/todo.tsx new file mode 100644 index 0000000000000..13407a86a3e2f --- /dev/null +++ b/examples/with-turso/app/todo.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { removeTodo } from "./actions"; + +export type TodoItem = { + id: number; + description: string; +}; + +export function Todo({ item }: { item: TodoItem }) { + return ( +
  • +
    + {item.description} +
    + + + +
  • + ); +} diff --git a/examples/with-turso/lib/turso.ts b/examples/with-turso/lib/turso.ts new file mode 100644 index 0000000000000..435fa4ea4b237 --- /dev/null +++ b/examples/with-turso/lib/turso.ts @@ -0,0 +1,6 @@ +import { createClient } from "@libsql/client"; + +export const db = createClient({ + url: process.env.TURSO_DB_URL ? process.env.TURSO_DB_URL : "file:./dev.db", + authToken: process.env.TURSO_DB_TOKEN, +}); diff --git a/examples/with-turso/next.config.mjs b/examples/with-turso/next.config.mjs new file mode 100644 index 0000000000000..4678774e6d606 --- /dev/null +++ b/examples/with-turso/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; diff --git a/examples/with-turso/package.json b/examples/with-turso/package.json new file mode 100644 index 0000000000000..ef9c9f49b530b --- /dev/null +++ b/examples/with-turso/package.json @@ -0,0 +1,26 @@ +{ + "private": true, + "scripts": { + "dev": "next dev --turbo", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@libsql/client": "0.4.0", + "next": "latest", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "autoprefixer": "^10.0.1", + "eslint": "^8", + "eslint-config-next": "14.1.0", + "postcss": "^8", + "tailwindcss": "^3.3.0", + "typescript": "^5" + } +} diff --git a/examples/with-turso/postcss.config.js b/examples/with-turso/postcss.config.js new file mode 100644 index 0000000000000..12a703d900da8 --- /dev/null +++ b/examples/with-turso/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/examples/with-turso/tailwind.config.ts b/examples/with-turso/tailwind.config.ts new file mode 100644 index 0000000000000..1adbf1287d393 --- /dev/null +++ b/examples/with-turso/tailwind.config.ts @@ -0,0 +1,13 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: {}, + }, + plugins: [], +}; +export default config; diff --git a/examples/with-turso/tsconfig.json b/examples/with-turso/tsconfig.json new file mode 100644 index 0000000000000..e7ff90fd27671 --- /dev/null +++ b/examples/with-turso/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/lerna.json b/lerna.json index d83770ef30b4c..fa1dfd669ecd1 100644 --- a/lerna.json +++ b/lerna.json @@ -16,5 +16,5 @@ "registry": "https://registry.npmjs.org/" } }, - "version": "14.3.0-canary.33" + "version": "14.3.0-canary.34" } diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json index d10d4516b55f5..6ba635cfaf84e 100644 --- a/packages/create-next-app/package.json +++ b/packages/create-next-app/package.json @@ -1,6 +1,6 @@ { "name": "create-next-app", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "keywords": [ "react", "next", diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json index 0bbebd5e2149a..f365e65600187 100644 --- a/packages/eslint-config-next/package.json +++ b/packages/eslint-config-next/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-next", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "ESLint configuration used by Next.js.", "main": "index.js", "license": "MIT", @@ -10,7 +10,7 @@ }, "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config", "dependencies": { - "@next/eslint-plugin-next": "14.3.0-canary.33", + "@next/eslint-plugin-next": "14.3.0-canary.34", "@rushstack/eslint-patch": "^1.3.3", "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0", "eslint-import-resolver-node": "^0.3.6", diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json index 6e5bfe65f579e..1fc983a1241b2 100644 --- a/packages/eslint-plugin-next/package.json +++ b/packages/eslint-plugin-next/package.json @@ -1,6 +1,6 @@ { "name": "@next/eslint-plugin-next", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "ESLint plugin for Next.js.", "main": "dist/index.js", "license": "MIT", diff --git a/packages/font/package.json b/packages/font/package.json index 3c019f1f85e38..dbe63ea096e9b 100644 --- a/packages/font/package.json +++ b/packages/font/package.json @@ -1,6 +1,6 @@ { "name": "@next/font", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "repository": { "url": "vercel/next.js", "directory": "packages/font" diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json index 2149056338b68..8d58b038ee3af 100644 --- a/packages/next-bundle-analyzer/package.json +++ b/packages/next-bundle-analyzer/package.json @@ -1,6 +1,6 @@ { "name": "@next/bundle-analyzer", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "main": "index.js", "types": "index.d.ts", "license": "MIT", diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json index c87e3e249663a..99dc8d711f08b 100644 --- a/packages/next-codemod/package.json +++ b/packages/next-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@next/codemod", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "license": "MIT", "repository": { "type": "git", diff --git a/packages/next-env/package.json b/packages/next-env/package.json index 353b2933e4737..e36fa8f1244f7 100644 --- a/packages/next-env/package.json +++ b/packages/next-env/package.json @@ -1,6 +1,6 @@ { "name": "@next/env", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "keywords": [ "react", "next", diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json index d85842efd4121..dc2e22294ab24 100644 --- a/packages/next-mdx/package.json +++ b/packages/next-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@next/mdx", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "main": "index.js", "license": "MIT", "repository": { diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index eb4bb4e10b13f..a2bcccd824c2d 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@next/plugin-storybook", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "repository": { "url": "vercel/next.js", "directory": "packages/next-plugin-storybook" diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json index bb10331aab1ba..4804bf671e5c8 100644 --- a/packages/next-polyfill-module/package.json +++ b/packages/next-polyfill-module/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-module", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)", "main": "dist/polyfill-module.js", "license": "MIT", diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json index 00b160ddec93f..e8d9eefc29905 100644 --- a/packages/next-polyfill-nomodule/package.json +++ b/packages/next-polyfill-nomodule/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-nomodule", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "A polyfill for non-dead, nomodule browsers.", "main": "dist/polyfill-nomodule.js", "license": "MIT", diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json index b757cbe3dba99..ec83862c98fd4 100644 --- a/packages/next-swc/package.json +++ b/packages/next-swc/package.json @@ -1,6 +1,6 @@ { "name": "@next/swc", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "private": true, "scripts": { "clean": "node ../../scripts/rm.mjs native", diff --git a/packages/next/package.json b/packages/next/package.json index 115a73368bd33..bc96d872ed90e 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -1,6 +1,6 @@ { "name": "next", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "The React Framework", "main": "./dist/server/next.js", "license": "MIT", @@ -93,7 +93,7 @@ ] }, "dependencies": { - "@next/env": "14.3.0-canary.33", + "@next/env": "14.3.0-canary.34", "@swc/helpers": "0.5.11", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", @@ -153,10 +153,10 @@ "@jest/types": "29.5.0", "@mswjs/interceptors": "0.23.0", "@napi-rs/triples": "1.2.0", - "@next/polyfill-module": "14.3.0-canary.33", - "@next/polyfill-nomodule": "14.3.0-canary.33", - "@next/react-refresh-utils": "14.3.0-canary.33", - "@next/swc": "14.3.0-canary.33", + "@next/polyfill-module": "14.3.0-canary.34", + "@next/polyfill-nomodule": "14.3.0-canary.34", + "@next/react-refresh-utils": "14.3.0-canary.34", + "@next/swc": "14.3.0-canary.34", "@opentelemetry/api": "1.6.0", "@playwright/test": "1.41.2", "@taskr/clear": "1.1.0", diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json index c0d5069364f97..8d87560afc432 100644 --- a/packages/react-refresh-utils/package.json +++ b/packages/react-refresh-utils/package.json @@ -1,6 +1,6 @@ { "name": "@next/react-refresh-utils", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "description": "An experimental package providing utilities for React Refresh.", "repository": { "url": "vercel/next.js", diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json index e1a65ccbe2038..d111ac9c9a805 100644 --- a/packages/third-parties/package.json +++ b/packages/third-parties/package.json @@ -1,6 +1,6 @@ { "name": "@next/third-parties", - "version": "14.3.0-canary.33", + "version": "14.3.0-canary.34", "repository": { "url": "vercel/next.js", "directory": "packages/third-parties" @@ -26,7 +26,7 @@ "third-party-capital": "1.0.20" }, "devDependencies": { - "next": "14.3.0-canary.33", + "next": "14.3.0-canary.34", "outdent": "0.8.0", "prettier": "2.5.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 37f3f80eccdd1..f03f68079a367 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -744,7 +744,7 @@ importers: packages/eslint-config-next: dependencies: '@next/eslint-plugin-next': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../eslint-plugin-next '@rushstack/eslint-patch': specifier: ^1.3.3 @@ -806,7 +806,7 @@ importers: packages/next: dependencies: '@next/env': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../next-env '@swc/helpers': specifier: 0.5.11 @@ -931,16 +931,16 @@ importers: specifier: 1.2.0 version: 1.2.0 '@next/polyfill-module': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../next-polyfill-module '@next/polyfill-nomodule': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../next-polyfill-nomodule '@next/react-refresh-utils': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../react-refresh-utils '@next/swc': - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../next-swc '@opentelemetry/api': specifier: 1.6.0 @@ -1555,7 +1555,7 @@ importers: version: 1.0.20 devDependencies: next: - specifier: 14.3.0-canary.33 + specifier: 14.3.0-canary.34 version: link:../next outdent: specifier: 0.8.0