feat: Next.js + Lens Client integration example

lens-protocol · Dec 27, 2024 · c793902 · c793902
1 parent 50d1b27
commit c793902
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 0 deletions.
diff --git a/examples/nextjs-client/.gitignore b/examples/nextjs-client/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/nextjs-client/.stackblitzrc b/examples/nextjs-client/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "startCommand": "npm run dev",
+  "env": {}
+}
diff --git a/examples/nextjs-client/README.md b/examples/nextjs-client/README.md
@@ -0,0 +1,5 @@
+# Next.js - Lens Client Integration Example
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/nextjs-client)
diff --git a/examples/nextjs-client/next.config.ts b/examples/nextjs-client/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/examples/nextjs-client/package.json b/examples/nextjs-client/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "nextjs-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@lens-protocol/client": "canary",
+    "next": "15.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "simpledotcss": "^2.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}
diff --git a/examples/nextjs-client/src/app/client.ts b/examples/nextjs-client/src/app/client.ts
@@ -0,0 +1,5 @@
+import { PublicClient, testnet } from '@lens-protocol/client';
+
+export const client = PublicClient.create({
+  environment: testnet,
+});
diff --git a/examples/nextjs-client/src/app/favicon.ico b/examples/nextjs-client/src/app/favicon.ico
diff --git a/examples/nextjs-client/src/app/globals.css b/examples/nextjs-client/src/app/globals.css
@@ -0,0 +1,42 @@
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
diff --git a/examples/nextjs-client/src/app/layout.tsx b/examples/nextjs-client/src/app/layout.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import 'simpledotcss/simple.min.css';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Next.js - Lens Client Integration',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang='en'>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/nextjs-client/src/app/page.tsx b/examples/nextjs-client/src/app/page.tsx
@@ -0,0 +1,26 @@
+import { AccountsOrderBy, PageSize } from '@lens-protocol/client';
+import { fetchAccounts } from '@lens-protocol/client/actions';
+import { client } from './client';
+
+export default async function Home() {
+  const result = await fetchAccounts(client, {
+    orderBy: AccountsOrderBy.AccountScore,
+    pageSize: PageSize.Ten,
+  });
+
+  if (result.isErr()) {
+    return <div>{result.error.message}</div>;
+  }
+
+  return (
+    <div>
+      <p>Top 10 Accounts by Account Score:</p>
+
+      <ul>
+        {result.value?.items.map((account) => (
+          <li key={account.address}>{account.username?.value}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/examples/nextjs-client/tsconfig.json b/examples/nextjs-client/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}