diff --git a/examples/nextjs/.eslintignore b/examples/nextjs/.eslintignore deleted file mode 100644 index d7d56a9..0000000 --- a/examples/nextjs/.eslintignore +++ /dev/null @@ -1,11 +0,0 @@ -.github -.next -.yalc -build -bundles -coverage -dist -lib -node_modules -out -public diff --git a/examples/nextjs/.eslintrc.json b/examples/nextjs/.eslintrc.json index aee2189..3722418 100644 --- a/examples/nextjs/.eslintrc.json +++ b/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"] } diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore index 65a304a..26b002a 100644 --- a/examples/nextjs/.gitignore +++ b/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 diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md index 0849194..ef0e47e 100644 --- a/examples/nextjs/README.md +++ b/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. diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts index 4f11a03..a4a7b3f 100644 --- a/examples/nextjs/next-env.d.ts +++ b/examples/nextjs/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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. diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js deleted file mode 100644 index a5d8ee8..0000000 --- a/examples/nextjs/next.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @type {import('next').NextConfig} - */ -const nextConfig = { - reactStrictMode: true, -}; - -module.exports = nextConfig; diff --git a/examples/nextjs/next.config.ts b/examples/nextjs/next.config.ts new file mode 100644 index 0000000..3915163 --- /dev/null +++ b/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; diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx deleted file mode 100644 index ad1f629..0000000 --- a/examples/nextjs/pages/_app.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import '../styles/globals.css'; -import type { AppProps } from 'next/app'; -import { Provider, ErrorBoundary } from '@rollbar/react'; - -const rollbarConfig = { - accessToken: process.env.NEXT_PUBLIC_ROLLBAR_TOKEN, - hostSafeList: ['localhost:3000', 'localhost:4000'], - captureUncaught: true, - captureUnhandledRejections: true, - payload: { - environment: 'development', - client: { - javascript: { - code_version: '1.0.0', - source_map_enabled: true, - }, - }, - }, -}; - -function MyApp({ Component, pageProps }: AppProps) { - return ( - - ( -

Oops, there was an error.

- )} - extra={{ more: 'data' }} - callback={() => console.log('an exception was sent to rollbar')} - > - - - - ); -} - -export default MyApp; diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx deleted file mode 100644 index 0dab179..0000000 --- a/examples/nextjs/pages/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import type { NextPage } from 'next'; -import Head from 'next/head'; -import Image from 'next/image'; -import { useCallback, useState } from 'react'; -import styles from '../styles/Home.module.css'; - -import { useRollbar, RollbarContext } from '@rollbar/react'; - -const Home: NextPage = () => { - const rollbar = useRollbar(); - - const sendMessage = useCallback(() => { - rollbar.info('manual message'); - }, [rollbar]); - - const [errorState, setErrorState] = useState(false); - - if (errorState) { - throw new Error('uncaught error (nextjs)'); - } - - return ( - -
- - Create Next App - - - - -
-

- Welcome to Next.js! -

- -

- Get started by sending a message{' '} - or throwing an uncaught - exception -

-
- - -
- - ); -}; - -export default Home; diff --git a/examples/nextjs/postcss.config.mjs b/examples/nextjs/postcss.config.mjs new file mode 100644 index 0000000..1a69fd2 --- /dev/null +++ b/examples/nextjs/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/examples/nextjs/public/file.svg b/examples/nextjs/public/file.svg new file mode 100644 index 0000000..004145c --- /dev/null +++ b/examples/nextjs/public/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/nextjs/public/globe.svg b/examples/nextjs/public/globe.svg new file mode 100644 index 0000000..567f17b --- /dev/null +++ b/examples/nextjs/public/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/nextjs/public/next.svg b/examples/nextjs/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/examples/nextjs/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/nextjs/public/vercel.svg b/examples/nextjs/public/vercel.svg index fbf0e25..7705396 100644 --- a/examples/nextjs/public/vercel.svg +++ b/examples/nextjs/public/vercel.svg @@ -1,4 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/examples/nextjs/public/window.svg b/examples/nextjs/public/window.svg new file mode 100644 index 0000000..b2b2a44 --- /dev/null +++ b/examples/nextjs/public/window.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/nextjs/src/pages/_app.tsx b/examples/nextjs/src/pages/_app.tsx new file mode 100644 index 0000000..0f8e7d2 --- /dev/null +++ b/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 ( + + ( +

Oops, there was an error.

+ )} + extra={{ more: 'data' }} + callback={() => console.log('an exception was sent to rollbar')} + > + <> + + + + + );; +} diff --git a/examples/nextjs/src/pages/_document.tsx b/examples/nextjs/src/pages/_document.tsx new file mode 100644 index 0000000..628a733 --- /dev/null +++ b/examples/nextjs/src/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from "next/document"; + +export default function Document() { + return ( + + + +
+ + + + ); +} diff --git a/examples/nextjs/pages/api/hello.ts b/examples/nextjs/src/pages/api/hello.ts similarity index 65% rename from examples/nextjs/pages/api/hello.ts rename to examples/nextjs/src/pages/api/hello.ts index 46714b3..ea77e8f 100644 --- a/examples/nextjs/pages/api/hello.ts +++ b/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, ) { - res.status(200).json({ name: 'John Doe' }); + res.status(200).json({ name: "John Doe" }); } diff --git a/examples/nextjs/src/pages/fonts/GeistMonoVF.woff b/examples/nextjs/src/pages/fonts/GeistMonoVF.woff new file mode 100644 index 0000000..f2ae185 Binary files /dev/null and b/examples/nextjs/src/pages/fonts/GeistMonoVF.woff differ diff --git a/examples/nextjs/src/pages/fonts/GeistVF.woff b/examples/nextjs/src/pages/fonts/GeistVF.woff new file mode 100644 index 0000000..1b62daa Binary files /dev/null and b/examples/nextjs/src/pages/fonts/GeistVF.woff differ diff --git a/examples/nextjs/src/pages/index.tsx b/examples/nextjs/src/pages/index.tsx new file mode 100644 index 0000000..a034ade --- /dev/null +++ b/examples/nextjs/src/pages/index.tsx @@ -0,0 +1,119 @@ +import Image from "next/image"; +import localFont from "next/font/local"; + +const geistSans = localFont({ + src: "./fonts/GeistVF.woff", + variable: "--font-geist-sans", + weight: "100 900", +}); +const geistMono = localFont({ + src: "./fonts/GeistMonoVF.woff", + variable: "--font-geist-mono", + weight: "100 900", +}); + +export default function Home() { + return ( +
+
+ Next.js logo +
    +
  1. + Get started by editing{" "} + + src/pages/index.tsx + + . +
    2. +
  2. Save and see your changes instantly.
    3. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + + + +
+
+ +
+ ); +} diff --git a/examples/nextjs/src/rollbar.ts b/examples/nextjs/src/rollbar.ts new file mode 100644 index 0000000..fc7809f --- /dev/null +++ b/examples/nextjs/src/rollbar.ts @@ -0,0 +1,17 @@ +import Rollbar from 'rollbar'; + +const baseConfig = { + captureUncaught: true, + captureUnhandledRejections: true, + environment: process.env.NODE_ENV, +}; + +export const clientConfig = { + accessToken: process.env.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN, + ...baseConfig, +}; + +export const serverInstance = new Rollbar({ + accessToken: process.env.ROLLBAR_SERVER_TOKEN, + ...baseConfig, +}); diff --git a/examples/nextjs/src/styles/globals.css b/examples/nextjs/src/styles/globals.css new file mode 100644 index 0000000..6b717ad --- /dev/null +++ b/examples/nextjs/src/styles/globals.css @@ -0,0 +1,21 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + color: var(--foreground); + background: var(--background); + font-family: Arial, Helvetica, sans-serif; +} diff --git a/examples/nextjs/styles/Home.module.css b/examples/nextjs/styles/Home.module.css deleted file mode 100644 index 30d1327..0000000 --- a/examples/nextjs/styles/Home.module.css +++ /dev/null @@ -1,125 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: - Menlo, - Monaco, - Lucida Console, - Liberation Mono, - DejaVu Sans Mono, - Bitstream Vera Sans Mono, - Courier New, - monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: - color 0.15s ease, - border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/examples/nextjs/styles/globals.css b/examples/nextjs/styles/globals.css deleted file mode 100644 index 51a2a4e..0000000 --- a/examples/nextjs/styles/globals.css +++ /dev/null @@ -1,26 +0,0 @@ -html, -body { - padding: 0; - margin: 0; - font-family: - -apple-system, - BlinkMacSystemFont, - Segoe UI, - Roboto, - Oxygen, - Ubuntu, - Cantarell, - Fira Sans, - Droid Sans, - Helvetica Neue, - sans-serif; -} - -a { - color: inherit; - text-decoration: none; -} - -* { - box-sizing: border-box; -} diff --git a/examples/nextjs/tailwind.config.ts b/examples/nextjs/tailwind.config.ts new file mode 100644 index 0000000..021c393 --- /dev/null +++ b/examples/nextjs/tailwind.config.ts @@ -0,0 +1,19 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + background: "var(--background)", + foreground: "var(--foreground)", + }, + }, + }, + plugins: [], +}; +export default config; diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json index 99710e8..572b7ad 100644 --- a/examples/nextjs/tsconfig.json +++ b/examples/nextjs/tsconfig.json @@ -1,19 +1,21 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "paths": { + "@/*": ["./src/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]