Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup nextjs examples #128

Merged
merged 12 commits into from
Oct 24, 2024
Merged

Cleanup nextjs examples #128

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7e05918
chore(examples): update nextjs-approuter to match new documentation
mudetroit Oct 22, 2024
72c6436
chore(examples): update nextjs to match new documentation
mudetroit Oct 23, 2024
e250a6b
chore(ci): no more node v16
mudetroit Oct 23, 2024
eed286e
chore(examples): cleanup package-lock files
mudetroit Oct 23, 2024
f96ece1
chore(examples): set nextjs eslint configs as root
mudetroit Oct 23, 2024
b1fa939
chore(examples): ignore next typescript eslint
mudetroit Oct 23, 2024
f928d3d
chore(examples): use js for next.config
mudetroit Oct 23, 2024
6d3033e
chore(example): bump typescript version in nextjs
mudetroit Oct 23, 2024
6ab4fa7
chore(examples): fix random indentation change
mudetroit Oct 23, 2024
56ef22a
chore(examples): match pages router versions to app router versions
mudetroit Oct 23, 2024
664b10e
chore(examples): sync nextjs example dependencies
mudetroit Oct 24, 2024
d1bf3b1
chore(example): remove dead code from app router example
mudetroit Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .github/workflows/ci.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ jobs:
strategy:
matrix:
include:
- node: 16
npm: 8
- node: 18
npm: 9
- node: 20
Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs-approuter/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"root": true,
"extends": "next/core-web-vitals"
"extends": ["next/core-web-vitals"]
}
2,609 changes: 1,327 additions & 1,282 deletions examples/nextjs-approuter/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 4 additions & 9 deletions examples/nextjs-approuter/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "nextjs-approuter",
"name": "nextjs-app-router-test",
"version": "0.1.0",
"private": true,
"scripts": {
Expand All @@ -8,26 +8,21 @@
"start": "next start",
"lint": "next lint"
},
"engines": {
"node": ">=18"
},
"dependencies": {
"@rollbar/react": "file:.yalc/@rollbar/react",
"next": "14.1.3",
"next": "14.2.15",
"react": "^18",
"react-code-blocks": "^0.1.6",
"react-dom": "^18",
"rollbar": "^2.26.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.3",
"eslint-config-next": "14.2.15",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
6 changes: 0 additions & 6 deletions examples/nextjs-approuter/postcss.config.js
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions examples/nextjs-approuter/postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};

export default config;
1 change: 0 additions & 1 deletion examples/nextjs-approuter/public/vercel.svg
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions examples/nextjs-approuter/src/app/callback.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions examples/nextjs-approuter/src/app/fallback.tsx
View file
Open in desktop

This file was deleted.

Binary file added examples/nextjs-approuter/src/app/fonts/GeistMonoVF.woff
View file
Open in desktop
mudetroit marked this conversation as resolved.
Show resolved Hide resolved
Binary file not shown.
Binary file added examples/nextjs-approuter/src/app/fonts/GeistVF.woff
View file
Open in desktop
Binary file not shown.
9 changes: 5 additions & 4 deletions examples/nextjs-approuter/src/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@

import { useEffect } from 'react';
import { ResetPage } from '@/components/ResetPage';
import { useRollbar } from '@rollbar/react';
import Rollbar from 'rollbar';
import { clientConfig } from '@/rollbar';

export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
error: Error;
reset: () => void;
}) {
const rollbar = useRollbar();

useEffect(() => {
const rollbar = new Rollbar(clientConfig)
rollbar.error(error);
}, [error, rollbar]);
}, [error]);

return (
<html>
Expand Down
20 changes: 7 additions & 13 deletions examples/nextjs-approuter/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,21 @@
@tailwind utilities;

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--background: #ffffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
Expand Down
30 changes: 22 additions & 8 deletions examples/nextjs-approuter/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,41 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import type { Metadata } from "next";
import localFont from "next/font/local";

import { Provider as RollbarProvider } from '@rollbar/react';
import { clientConfig } from '@/rollbar';

import './globals.css';
import "./globals.css";

const inter = Inter({ subsets: ['latin'] });
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 const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<RollbarProvider config={clientConfig}>
<html lang="en">
<body className={inter.className}>{children}</body>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
{Array.isArray(posts) && <span>Found some posts</span>}
</body>
</html>
</RollbarProvider>
);
Expand Down
8 changes: 0 additions & 8 deletions examples/nextjs-approuter/src/app/middleware.ts
View file
Open in desktop

This file was deleted.

7 changes: 5 additions & 2 deletions examples/nextjs-approuter/src/app/next_error_handler/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client'; // Error components must be Client Components
'use client';

import { useEffect } from 'react';
import { ResetPage } from '@/components/ResetPage';
Expand All @@ -8,11 +8,14 @@ export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
error: Error;
reset: () => void;
}) {
console.log('NextErrorHandler error', error);

const rollbar = useRollbar();
useEffect(() => {
console.log('NextErrorHandler useEffect', rollbar);
rollbar.error(error);
}, [error, rollbar]);

Expand Down
124 changes: 96 additions & 28 deletions examples/nextjs-approuter/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,101 @@
import * as fs from 'fs';
import { Code } from '@/components/Code';
import Link from 'next/link';

const code = fs.readFileSync('./src/rollbar.ts', 'utf-8');
import Image from "next/image";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-start p-24 space-y-8">
<header>
<h1 className="mb-4 text-4xl font-extrabold leading-none">
Rollbar: Next.js App Router Example
</h1>
</header>
<p>
Using Rollbar with the Next.js App Router is quick and easy to
implement. The first step for any integration will be creating your own
Rollbar instance. This can be done as follows:
</p>
<Code code={code} />
<p>
This will create a rollbar instance that you can use to capture your
errors. It can be used within the{' '}
<Link href="/next_error_handler">Next.JS App Router error handler</Link>{' '}
or using the{' '}
<Link href="/rollbar_error_boundary">
{`<ErrorBoundary`} from the @rollbar/react package
</Link>{' '}
. It can also be used server side within Next.js middleware
</p>
</main>
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
}
2 changes: 1 addition & 1 deletion examples/nextjs-approuter/src/app/rollbar_error_boundary/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ResetPage } from '@/components/ResetPage';

export default function RollbarErrorBoundary() {
return (
<ErrorBoundary fallbackUI={() => <ResetPage reset={() => {}} />}>
<ErrorBoundary fallbackUI={() => <ResetPage reset={() => { location.reload()}} />}>
mudetroit marked this conversation as resolved.
Show resolved Hide resolved
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={() => {
Expand Down
7 changes: 0 additions & 7 deletions examples/nextjs-approuter/src/components/Code.tsx
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions examples/nextjs-approuter/src/components/ResetPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use client';

export function ResetPage({ reset }: { reset: () => void }) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
return (
<div>
<h1>Something went wrong!</h1>
<button onClick={reset}>Try again</button>
</div>
);
mudetroit marked this conversation as resolved.
Show resolved Hide resolved
}
Loading
Loading