Next.js Example

[colbyfayock]

Hey 👋 do you happen to have an example with Next.js?

Followed the steps and used the Next.js adapter:

const injectDevServer = require("@cypress/react/plugins/next")

When running yarn cypress open-c I got:

Error: Cannot find module 'webpack-dev-server'
Require stack:
- /Users/colbyfayock/Code/demo-ecommerce/node_modules/@cypress/webpack-dev-server/dist/startServer.js

Tried installing webpack-dev-server and then got an error for:

Error: Cannot find module 'html-webpack-plugin'
Require stack:
- /Users/colbyfayock/Code/demo-ecommerce/node_modules/@cypress/webpack-dev-server/dist/webpack.config.js

Here's the PR with me playing around with it: https://github.com/colbyfayock/demo-ecommerce/pull/3/files

The component test: https://github.com/colbyfayock/demo-ecommerce/blob/applitools-components/src/components/Container/Container.test.js

For what it's worth tried the steps in the README and worked great :)

[lmiller1990]

Hey, I sure do.

• Docs for Next.js setup (webpack 4/5): https://docs.cypress.io/guides/component-testing/framework-configuration#Next-js
• Working example: https://github.com/cypress-io/cypress-component-examples/tree/main/nextjs-webpack-4

We also have two Next.js projects used for internal testing in the Cypress repo: https://github.com/cypress-io/cypress/tree/develop/npm/react/examples.

Next.js' internal configuration is super complicated. Let me know if you find any issues, I'd really like to get as many popular frameworks working out of the box.

Related: some discussions on Next.js configuration:

• https://github.com/cypress-io/cypress/discussions/16294
• https://github.com/cypress-io/cypress/discussions/15726
• https://github.com/cypress-io/cypress/discussions/16136

[colbyfayock]

awesome thank you @lmiller1990 🙏