HomeGithubBlog

Discussions

upvotes

12

[next.js] - Hello ! I don't think you need both .eslintrc.json and .eslinrc.js. In fact it might be the root cause of your issue. The second file seems to override the first. If you get rid of .eslintrc.json to only keep .eslinrc.js and add the next plugin at the end like : "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "next/core-web-vitals" ], ... it should fix your problem.
upvotes

3

[next.js] - Hello ! If I understand correctly, the ready - started server on message is triggered after the webpack build is finished. What do you think about watching the end of the webpack build instead of the Next server start ? It might not be exactly what you want but it should be pretty close to. In your next.config.js file you could use an afterEmit or a done hook (inside the Webpack config section). If you don't want to do it by hand, you could also use a Webpack plugin such as webpack-shell-plugin. onBuildEnd or onBuildExit should do the trick. Hope it helps !
upvotes

3

[next.js] - Hello. Can you share your eslint config ? If you extends "next" (like the docs suggest : https://nextjs.org/docs/basic-features/eslint) you won't get the first error as it is disabled. See : https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js#L19 Also react/jsx-props-no-spreading is not even in the recommended config. You probably have it included in your custom configuration.
upvotes

1

[next.js] - Hello ! It looks like your are using the active-class-name example. A patch has been merged here #28481 prop-types has been removed from Next internal package.json since this PR #27196, because it's not needed anymore for internal files. If you want to use it on your own you probably need to install it yourself.
upvotes

1

[next.js] - Glad it worked ! 😄 Feel free to mark a message as an "answer" so people know your issue is resolved. Have a good day.
upvotes

2

[next.js] - Hello ! I think the easiest way would be to remove parser and parserOptions as the next plugin will handle it automatically for you. Then you should just add next at the end of your extends array like : "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "next"] You do need to install eslint-config-next.
upvotes

1

[next.js] - Hello ! When you mention "code coverage" does it mean the coverage of your unit tests ? If so, Next.js behave exactly the same as a basic React app. You can follow https://nextjs.org/docs/testing#jest-and-react-testing-library to get instruction on how to set up Jest with Next.js Jest provides a nice --coverage option for this usecase. I don't think running your coverage against the npm run dev is what you want. The coverage is generated by a test runner like jest, cypress, ... you can't measure the coverage of a generated output.
upvotes

1

[next.js] - Hello ! In development (next dev), getStaticProps will be called on every request. (doc link) Prefetching is only enabled in production. (doc link). When you navigate to the about page that has been prefetched, the JS chunk has already been downloaded by the client and this chunk will be used to display the page. You don't need to make a server request since the page is static and you already have it. If you use next/link to navigate to a server side rendered page, the getServerSideProps function will still be called. With CSR and SSG, the generated output will contain your page without the fetched data. For the following code : export default function MyPage() { const { data } = useSWR("myEndpoint", fetcher); if (!data) return <p>Loading...</p>; return ( <div> Hello {data} </div> ); } The generated content will be <p>Loading...</p> In my opinion the best way to get more confortable with a framework is to carefully read the docs and to try things out. You'll learn a lot more by tweaking things yourself and playing with the options 🙂
upvotes

1

[next.js] - Hello ! It's probably because of this PR #28269 which was part of the https://github.com/vercel/next.js/releases/tag/v11.1.1. Do you have a custom component that wraps the next/image ?
upvotes

0

[next.js] - Hmm, I don't know how to reproduce this. Can you share the code on how you are calling the Image component ? Also, double check that you don't have a global type configuration for the image. Subsequent property declarations must have the same type usually mean that you have multiple interface declaration with the same name (here ImgHTMLAttributes). Maybe you have a .d.ts somewhere in your codebase that defines ImgHTMLAttributes... ?

Recent activity

Pull Requests

Commits

Repositories