add pages router example in next 13 (v7)

Author: s1gr1d

.env.example

@@ -1 +1,2 @@
-SENTRY_DSN=
+SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_DSN=

apps/nextjs-13_2_0/pages/api/pages-router/test-param-error/[param].ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import * as Sentry from '@sentry/nextjs';
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<{ exceptionId: string; paramWas: string }>,
+) {
+  const exceptionId = Sentry.captureException(new Error('This is an error'));
+  res.status(500).json({ exceptionId, paramWas: req.query.param?.toString() || '' });
+}

apps/nextjs-13_2_0/pages/api/pages-router/test-param-success/[param].ts

@@ -0,0 +1,5 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse<{ paramWas: string }>) {
+  res.status(200).json({ paramWas: req.query.param?.toString() || '' });
+}

apps/nextjs-13_2_0/pages/pages-router/test-route-handlers.tsx

@@ -0,0 +1,36 @@
+import type { GetServerSideProps, NextPage } from 'next';
+import React from 'react';
+import { useFetchData } from '@/utils/fetchData';
+
+const displayData = (data: any) => (data ? JSON.stringify(data, null, 2) : 'No data');
+
+/***************************************************************
+ * IMPORTANT: when running the pages-router, you have to set `appDir: false` in next.config.js
+ ****************************************************************/
+
+const Page: NextPage<{ propFromServerSide: string }> = ({ propFromServerSide }) => {
+  const { data: dataParamSuccess, fetchData: testParamSuccess } = useFetchData(
+    '/api/pages-router/test-param-success/1337',
+  );
+  const { data: dataParamError, fetchData: testParamError } = useFetchData(
+    '/api/pages-router/test-param-error/1337',
+  );
+
+  return (
+    <>
+      <p>{`Prop from 'getServerSideProps': ${propFromServerSide}`}</p>
+
+      <button onClick={() => testParamSuccess()}>Test Param Success</button>
+      <p>{displayData(dataParamSuccess)}</p>
+
+      <button onClick={() => testParamError()}>Test Param Error</button>
+      <p>{displayData(dataParamError)}</p>
+    </>
+  );
+};
+
+export default Page;
+
+export const getServerSideProps = (async () => {
+  return { props: { propFromServerSide: 'success' } };
+}) satisfies GetServerSideProps<{ propFromServerSide: string }>;

apps/nextjs-13_2_0/sentry.client.config.ts

@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
-  dsn: process.env.SENTRY_DSN,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   includeLocalVariables: true,
   tunnel: `http://localhost:3031/`, // proxy server
   tracesSampleRate: 1,