Skip to content

Commit 848cbf9

Browse files
cesarenaldicesarenaldi
committed
feat: Next.js + Lens Client integration example
1 parent 50d1b27 commit 848cbf9

File tree

12 files changed

+380
-0
lines changed

12 files changed

+380
-0
lines changed

‎examples/nextjs-client/.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎examples/nextjs-client/.stackblitzrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"startCommand": "npm run dev",
3+
"env": {}
4+
}

‎examples/nextjs-client/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Next.js - Lens Client Integration Example
2+
3+
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).
4+
5+
[![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)

‎examples/nextjs-client/next.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { NextConfig } from "next";
2+
3+
const nextConfig: NextConfig = {
4+
/* config options here */
5+
};
6+
7+
export default nextConfig;

‎examples/nextjs-client/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "nextjs-client",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@lens-protocol/client": "canary",
13+
"next": "15.1.3",
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0",
16+
"simpledotcss": "^2.3.3"
17+
},
18+
"devDependencies": {
19+
"@types/node": "^20",
20+
"@types/react": "^19",
21+
"@types/react-dom": "^19",
22+
"typescript": "^5"
23+
}
24+
}

‎examples/nextjs-client/src/app/client.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { PublicClient, testnet } from '@lens-protocol/client';
2+
3+
export const client = PublicClient.create({
4+
environment: testnet,
5+
});

‎examples/nextjs-client/src/app/favicon.ico

25.3 KB
Binary file not shown.

‎examples/nextjs-client/src/app/globals.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
:root {
2+
--background: #ffffff;
3+
--foreground: #171717;
4+
}
5+
6+
@media (prefers-color-scheme: dark) {
7+
:root {
8+
--background: #0a0a0a;
9+
--foreground: #ededed;
10+
}
11+
}
12+
13+
html,
14+
body {
15+
max-width: 100vw;
16+
overflow-x: hidden;
17+
}
18+
19+
body {
20+
color: var(--foreground);
21+
background: var(--background);
22+
font-family: Arial, Helvetica, sans-serif;
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
* {
28+
box-sizing: border-box;
29+
padding: 0;
30+
margin: 0;
31+
}
32+
33+
a {
34+
color: inherit;
35+
text-decoration: none;
36+
}
37+
38+
@media (prefers-color-scheme: dark) {
39+
html {
40+
color-scheme: dark;
41+
}
42+
}

‎examples/nextjs-client/src/app/layout.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { Metadata } from 'next';
2+
import { Geist, Geist_Mono } from 'next/font/google';
3+
import './globals.css';
4+
5+
const geistSans = Geist({
6+
variable: '--font-geist-sans',
7+
subsets: ['latin'],
8+
});
9+
10+
const geistMono = Geist_Mono({
11+
variable: '--font-geist-mono',
12+
subsets: ['latin'],
13+
});
14+
15+
export const metadata: Metadata = {
16+
title: 'Next.js - Lens Client Integration',
17+
description: 'Generated by create next app',
18+
};
19+
20+
export default function RootLayout({
21+
children,
22+
}: Readonly<{
23+
children: React.ReactNode;
24+
}>) {
25+
return (
26+
<html lang='en'>
27+
<body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
28+
</html>
29+
);
30+
}

‎examples/nextjs-client/src/app/page.module.css

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
.page {
2+
--gray-rgb: 0, 0, 0;
3+
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4+
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5+
6+
--button-primary-hover: #383838;
7+
--button-secondary-hover: #f2f2f2;
8+
9+
display: grid;
10+
grid-template-rows: 20px 1fr 20px;
11+
align-items: center;
12+
justify-items: center;
13+
min-height: 100svh;
14+
padding: 80px;
15+
gap: 64px;
16+
font-family: var(--font-geist-sans);
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
.page {
21+
--gray-rgb: 255, 255, 255;
22+
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23+
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24+
25+
--button-primary-hover: #ccc;
26+
--button-secondary-hover: #1a1a1a;
27+
}
28+
}
29+
30+
.main {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 32px;
34+
grid-row-start: 2;
35+
}
36+
37+
.main ol {
38+
font-family: var(--font-geist-mono);
39+
padding-left: 0;
40+
margin: 0;
41+
font-size: 14px;
42+
line-height: 24px;
43+
letter-spacing: -0.01em;
44+
list-style-position: inside;
45+
}
46+
47+
.main li:not(:last-of-type) {
48+
margin-bottom: 8px;
49+
}
50+
51+
.main code {
52+
font-family: inherit;
53+
background: var(--gray-alpha-100);
54+
padding: 2px 4px;
55+
border-radius: 4px;
56+
font-weight: 600;
57+
}
58+
59+
.ctas {
60+
display: flex;
61+
gap: 16px;
62+
}
63+
64+
.ctas a {
65+
appearance: none;
66+
border-radius: 128px;
67+
height: 48px;
68+
padding: 0 20px;
69+
border: none;
70+
border: 1px solid transparent;
71+
transition:
72+
background 0.2s,
73+
color 0.2s,
74+
border-color 0.2s;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
line-height: 20px;
81+
font-weight: 500;
82+
}
83+
84+
a.primary {
85+
background: var(--foreground);
86+
color: var(--background);
87+
gap: 8px;
88+
}
89+
90+
a.secondary {
91+
border-color: var(--gray-alpha-200);
92+
min-width: 180px;
93+
}
94+
95+
.footer {
96+
grid-row-start: 3;
97+
display: flex;
98+
gap: 24px;
99+
}
100+
101+
.footer a {
102+
display: flex;
103+
align-items: center;
104+
gap: 8px;
105+
}
106+
107+
.footer img {
108+
flex-shrink: 0;
109+
}
110+
111+
/* Enable hover only on non-touch devices */
112+
@media (hover: hover) and (pointer: fine) {
113+
a.primary:hover {
114+
background: var(--button-primary-hover);
115+
border-color: transparent;
116+
}
117+
118+
a.secondary:hover {
119+
background: var(--button-secondary-hover);
120+
border-color: transparent;
121+
}
122+
123+
.footer a:hover {
124+
text-decoration: underline;
125+
text-underline-offset: 4px;
126+
}
127+
}
128+
129+
@media (max-width: 600px) {
130+
.page {
131+
padding: 32px;
132+
padding-bottom: 80px;
133+
}
134+
135+
.main {
136+
align-items: center;
137+
}
138+
139+
.main ol {
140+
text-align: center;
141+
}
142+
143+
.ctas {
144+
flex-direction: column;
145+
}
146+
147+
.ctas a {
148+
font-size: 14px;
149+
height: 40px;
150+
padding: 0 16px;
151+
}
152+
153+
a.secondary {
154+
min-width: auto;
155+
}
156+
157+
.footer {
158+
flex-wrap: wrap;
159+
align-items: center;
160+
justify-content: center;
161+
}
162+
}
163+
164+
@media (prefers-color-scheme: dark) {
165+
.logo {
166+
filter: invert();
167+
}
168+
}

0 commit comments

Comments
 (0)