Add Next.js example

.gitignore

@@ -52,3 +52,14 @@ build
 
 # typedocs
 docs
+
+# next.js
+.next
+out
+next-env.d.ts
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/nextjs/.eslintrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: ["xmtp-web"],
+  parserOptions: {
+    project: "./tsconfig.eslint.json",
+  },
+  rules: {
+    "react/function-component-definition": "off",
+  },
+};

examples/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    return config;
+  },
+};
+
+export default nextConfig;

examples/nextjs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "dev": "next dev",
+    "format": "yarn format:base -w .",
+    "format:base": "prettier --ignore-path ../../.gitignore --ignore",
+    "format:check": "yarn format:base -c .",
+    "lint": "eslint . --ignore-path ../../.gitignore",
+    "start": "next start",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbowkit": "^2.0.2",
+    "@tanstack/react-query": "^5.28.0",
+    "@wagmi/core": "^2.6.6",
+    "@xmtp/react-app": "workspace:*",
+    "next": "14.1.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "viem": "^2.7.15",
+    "wagmi": "^2.5.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8.57.0",
+    "eslint-config-xmtp-web": "workspace:*",
+    "prettier": "^3.2.5",
+    "typescript": "^5"
+  }
+}

examples/nextjs/src/app/globals.css

@@ -0,0 +1,33 @@
+:root {
+  font-family: "SF Pro Rounded", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
+  line-height: 1.3;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: #213547;
+  background-color: #fff;
+}
+
+#root {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#root > [data-rk] {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}

examples/nextjs/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "XMTP Next.js example",
+  description: "XMTP chat app in Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  );
+}

examples/nextjs/src/app/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import "@rainbow-me/rainbowkit/styles.css";
+import "@xmtp/react-app/styles.css";
+import { StrictMode } from "react";
+import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
+import { mainnet } from "@wagmi/core/chains";
+import { http } from "@wagmi/core";
+import { WagmiProvider } from "wagmi";
+import { App } from "@xmtp/react-app";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const config = getDefaultConfig({
+  appName: "XMTP Next.js Example",
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
+});
+
+const queryClient = new QueryClient();
+
+export default function Home() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider>
+          <StrictMode>
+            <App />
+          </StrictMode>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}

examples/nextjs/src/globals.d.ts

@@ -0,0 +1,7 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    NEXT_PUBLIC_PROJECT_ID: string;
+    NEXT_PUBLIC_INFURA_ID: string;
+    [key: string]: string | undefined;
+  }
+}

examples/nextjs/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*", ".eslintrc.cjs", "next-env.d.ts"]
+}

examples/nextjs/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": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "src/**/*", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}