Add Next.js setup guide about site HOT 10 CLOSED

Update: vercel/next.js#10509 (comment)

from site.

Nice! Awesome to hear!

I think we should be able to get mirage released and the website updated with the nextjs example this week.

from site.

This would be great! Just spitballing: if you avoid SSR for pages it seems like Mirage could be initiated in _app.js and you'd be good to go.

from site.

I've attempted that but haven't been able to get it to work, perhaps because of the nextjs fetch polyfill? It's not really clear why Pretender isn't picking up on the requests.

Repo: https://github.com/GriffinSauce/nextjs-mirage-example

@timneutkens any chance you or a team member could take a look at this?

from site.

Thanks @GriffinSauce !

I just gave it a shot and think you're right about it having to do with the polyfill. The way that we (pretender) intercept fetch requests is by installing the whatwg-fetch polyfill, which changes window.fetch to use XMLHttpRequest, and then we rely on pretender to pickup those outgoing XMLHttpRequests.

It looks like in next we can't rely on whatwg-fetch, since it's getting replaced by another polyfill? I'm not too knowledgable about next, so correct me if I'm wrong here.

We'll need to investigate more, and probably come up with another way to catch these fetch requests in a next friendly way.

from site.

I've done a little digging. Seems like next.js already polyfills with whatwg:

https://github.com/zeit/next.js/blob/ecd628b7e0619da7677b57138a7dd59c1b581b59/packages/next/build/webpack-config.ts#L77

Imported here:

https://github.com/zeit/next.js/blob/04a7f1e85d34c72a3d45a05f4ca9d158ef1b5af0/packages/next/client/polyfills.js

And loaded here:

https://github.com/zeit/next.js/blob/2fe743581471279497b53ed692ff77c01be73e93/packages/next/pages/_document.tsx#L622

They make a specific effort to load this before anything else. Perhaps customising the webpack config to alias the modules could work but that greatly diminishes the DX and maintainability.

Didn't have time to try anything else yet, but it looks pretty tricky. :(

from site.

Just to let you know, I just patched in the new pretender version (in my example) via yarn resolution and it works!

I see you already have a PR here so I didn't make one. :)
miragejs/miragejs#361

Thank for the effort!

from site.

Even I am trying to add MirageJs to Next app and I am finding it difficult. If we can run miragejs as a seperate server then I think it will work fine @samselikoff

from site.

Can finally close this – all the changes have been made so Mirage works w/Next.js for client-side API requests out of the box!

https://miragejs.com/quickstarts/nextjs/develop-a-page/

from site.

🙌 Thanks Sam!

from site.