NextJS Guide?

[FTCHD]

I'd love to be the one to add it but I'm not so familiar with how this should be integrated.

I've integrated prerender in the past and their NextJS middleware is pretty straight forward, not sure if just doing a copy pasta for spiderable would work?

For reference, here are the prerender docs for Next:

• https://docs.prerender.io/docs/nextjs
• https://gist.github.com/Lasalot/c64cfa4ef3c1fecd8a670999321f445c

Ideally, we edit Next middleware to check if the request is a bot, and if so we send it to Ostr for prerendering.

This is a touchy topic (regarding SEO and not screwing up page/domain scores), so that why I'm reticent to do it without the proper experience of how spiderable works.

This would potentially unlock a lot of new users, right now NextJS users have only one easy/default option.

[FTCHD]

I've added an example for Cloudflare Workers in the meantime, should be pretty close to Next: https://github.com/veliovgroup/spiderable-middleware/pull/19

[txprojects88]

Agree it would be great to have a nextjs example :)

[dr-dimitru]

@FTCHD @txprojects88 have you tried?

In NextJS project's root directory create middleware.js:

import { NextResponse } from "next/server";
import Spiderable from 'spiderable-middleware';

const spiderable = new Spiderable({
  rootURL: 'http://example.com',
  auth: 'APIUser:APIPass'
});

const next () => {
  return NextResponse.next();
};

export async function middleware(req, res) { 
  return spiderable.handler(req, res, next);
};

[txprojects88]

Get error

Could not find a declaration file for module 'spiderable-middleware'. '/Users/node_modules/spiderable-middleware/lib/index.js' implicitly has an 'any' type. Trynpm i --save-dev @types/spiderable-middlewareif it exists or add a new declaration (.d.ts) file containingdeclare module 'spiderable-middleware';`

npm i --save-dev @types/spiderable-middleware did not work

[dr-dimitru]

@txprojects88 How to use NPM package without Types Definitions?

[txprojects88]

I declared the module but still getting Error: The edge runtime does not support Node.js 'https' module. Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

[dr-dimitru]

@txprojects88 Are you sure you're adding this to server-only environment? Where this error is displayed? Terminal? Browser?

[txprojects88]

I am using this in the middleware. Error is displayed in browser.

[dr-dimitru]

@txprojects88 Doesn't sounds right. Hold on I'll try to reproduce on my end. What Router do you use?

[dr-dimitru]

@txprojects88 And what version of next.js?

[txprojects88]

app router

[txprojects88]

14.0.3