-
A
next lint
command was added to thepackage.json
-
.eslintrc.json
was created with the strictest mode possible -
client.tsx
was created with a client-only declaration without theuse client
directive -
page.tsx
was modified to callclient.tsx
-
An identical structure was created under the
[id]
route segment.
- Commenting out both
use client
directives and runningnext lint
should generate an error in bothclient.tsx
for using client-only declarations without theuse client
directive next build
should fail the build in both scenarios
- No errors are generated on lint
- As committed,
next build
allows the build, which results in a500
error accessing the page viapnpm start --port 3000
and visitinglocalhost:3000/a
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
digest: '243405769'
}
Error: Event handlers cannot be passed to Client Component props.
{src: ..., onError: function, alt: ...}
^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at /home/jakobo/code/nextjs/allowed-compile-rsc/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:142759
at Object.toJSON (/home/jakobo/code/nextjs/allowed-compile-rsc/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:143612)
at stringify (<anonymous>)
at eE (/home/jakobo/code/nextjs/allowed-compile-rsc/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131997)
at eR (/home/jakobo/code/nextjs/allowed-compile-rsc/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132440)
at Timeout._onTimeout (/home/jakobo/code/nextjs/allowed-compile-rsc/node_modules/.pnpm/next@14.0.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129220)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)
This is a Next.js template to use when reporting a bug in the Next.js repository with the app/
directory.
These are the steps you should follow when creating a bug report:
- Bug reports must be verified against the
next@canary
release. The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces before opening a new issue. Issues not verified againstnext@canary
will be closed after 30 days. - Make sure your issue is not a duplicate. Use the GitHub issue search to see if there is already an open issue that matches yours. If that is the case, upvoting the other issue's first comment is desireable as we often prioritize issues based on the number of votes they receive. Note: Adding a "+1" or "same issue" comment without adding more context about the issue should be avoided. If you only find closed related issues, you can link to them using the issue number and
#
, eg.:I found this related issue: #3000
. - If you think the issue is not in Next.js, the best place to ask for help is our Discord community or GitHub discussions. Our community is welcoming and can often answer a project-related question faster than the Next.js core team.
- Make the reproduction as minimal as possible. Try to exclude any code that does not help reproducing the issue. E.g. if you experience problems with Routing, including ESLint configurations or API routes aren't necessary. The less lines of code is to read through, the easier it is for the Next.js team to investigate. It may also help catching bugs in your codebase before publishing an issue.
- Don't forget to create a new repository on GitHub and make it public so that anyone can view it and reproduce it.
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example reproduction-template reproduction-app
yarn create next-app --example reproduction-template reproduction-app
pnpm create next-app --example reproduction-template reproduction-app
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- How to Contribute to Open Source (Next.js) - a video tutorial by Lee Robinson
- Triaging in the Next.js repository - how we work on issues
- CodeSandbox - Edit this repository on CodeSandbox
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
If your reproduction needs to be deployed, the easiest way is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.