Appear supports several implementation methods for NextJS, including deployments with and without Vercel. More methods will be supported over time and as requested by customers.
All of the supported installation methods require the below two steps to be completed first. Once you've installed the package and patched the webpack configuration, move on to your preferred NextJS installation method.
1
Install the Appear package (select one)
npm i @appear.sh/introspector@0.0.7-canary.2 // or
yarn add @appear.sh/introspector@0.0.7-canary.2 // or
pnpm add @appear.sh/introspector@0.0.7-canary.2
2
Patch webpack configuration
Make the following changes to your next.config.js file.
This will initialise and configure the introspector, including a custom request filter to exclude all internal _next routes that client-side NextJS apps use.
2
Log into Appear
The introspector will begin reporting the structure of your API services when they're interacted with. Log into Appear with your credentials to view services as they appear. You may need to refresh the page periodically.
App router - Route handlers
1
Create instantiation file for Appear
Create a file where you can instantiate Appear, for example: api/src/withAppear.ts
/// withAppear.ts
import { createVercelRouteHandlerMiddleware } from "@appear.sh/introspector/integrations/nextjs"
export const withAppear = createVercelRouteHandlerMiddleware({
// api key you can obtain at https://app.appear.sh/settings
apiKey: "your-api-key",
// any identifier of enviroment you prefer, we recommend to at least separate production/staging/development. The more granular the better
environment: process.env.NODE_ENV,
// other config as you desire
// ...
})
2
Wrap your API routes
Wrap each of your API Routes in withAppear to send them to Appear.
// eg. src/pages/api/<route name>.ts
import { withAppear } from "src/withAppear"
export const POST = withAppear(async (request: Request) => {
// your code
})
3
Log into Appear
The introspector will begin reporting the structure of your API services when they're interacted with. Log into Appear with your credentials to view services as they appear. You may need to refresh the page periodically.
Pages Router - Client Side
If you're using pages router for NextJS this is the path to follow.
1
Modify or create _app.tsx
Modify or create your pages/_app.tsx file, and add the following:
This will initialise and configure the introspector, including a custom request filter to exclude all internal _next routes that client-side NextJS apps use.
2
Log into Appear
The introspector will begin reporting the structure of your API services when they're interacted with. Log into Appear with your credentials to view services as they appear. You may need to refresh the page periodically.
Pages router - Server-side (API routes)
1
Create instantiation file for Appear
Create a dedicated file where you can instantiate Appear, for example: src/withAppear.ts
import { createVercelPagesMiddleware } from "@appear.sh/introspector/integrations/nextjs"
export const withAppear = createVercelPagesMiddleware({
// api key you can obtain at https://app.appear.sh/settings
apiKey: "your-api-key",
// any identifier of environment you prefer, we recommend seperating production/staging/development. The more granular the better
environment: process.env.NODE_ENV,
// other config as you desire
// ...
})
2
Wrap your API routes
Wrap your API Routes in withAppear to send them to Appear
The introspector will begin reporting the structure of your API services when they're interacted with. Log into Appear with your credentials to view services as they appear. You may need to refresh the page periodically.
App Router - Server Side rendering
This method is not supported yet. If your company requires this, please contact us.
If you have any queries or require support with the above instructions, please contact us.
