chore(examples): update nextjs to match new documentation

examples/nextjs/.eslintrc.json

@@ -1,7 +1,3 @@
 {
-  "root": true,
-  "extends": ["next/core-web-vitals"],
-  "rules": {
-    "react/react-in-jsx-scope": "off"
-  }
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }

examples/nextjs/.gitignore

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -15,10 +20,6 @@
 # production
 /build
 
-# development
-/.yalc
-yalc.lock
-
 # misc
 .DS_Store
 *.pem
@@ -27,16 +28,13 @@ yalc.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+# env files (can opt-in for commiting if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
+next-env.d.ts

examples/nextjs/README.md

@@ -1,14 +1,4 @@
-# Rollbar - Next.js example
-
-This project shows an example of how to add rollbar to your nextjs application.
-It requires a `.env.local` file to be set with a `NEXT_PUBLIC_ROLLBAR_TOKEN` variable.
-
-The important files are `pages/_app.tsx` where it renders a rollbar provider
-and `pages/index.tsx` where it sends a message and throws an error.
-
----
-
-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).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/pages/api-reference/create-next-app).
 
 ## Getting Started
 
@@ -18,27 +8,33 @@ First, run the development server:
 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 `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## 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.
+- [Learn Next.js](https://nextjs.org/learn-pages-router) - 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!
+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.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

examples/nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

examples/nextjs/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+export default nextConfig;

examples/nextjs/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/nextjs/src/pages/_app.tsx

@@ -0,0 +1,25 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Provider, ErrorBoundary } from '@rollbar/react';
+
+import { clientConfig } from '@/rollbar';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <Provider config={clientConfig}>
+      <ErrorBoundary
+        level="critical"
+        errorMessage="example error boundary message"
+        fallbackUI={() => (
+          <p style={{ color: 'red' }}>Oops, there was an error.</p>
+        )}
+        extra={{ more: 'data' }}
+        callback={() => console.log('an exception was sent to rollbar')}
+      >
+        <>
+          <Component {...pageProps} />
+        </>
+      </ErrorBoundary>
+    </Provider>
+  );;
+}

examples/nextjs/src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

examples/nextjs/pages/api/hello.ts → examples/nextjs/src/pages/api/hello.ts

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
   name: string;
@@ -9,5 +9,5 @@ export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ name: 'John Doe' });
+  res.status(200).json({ name: "John Doe" });
 }