Common Next.js issues that could use integrated ESLint rules

Describe the feature you’d like to request

These are common issues developers run into with Next.js. Some are mentioned in the docs, but ideally you don’t have to go check the docs.

Describe the solution you’d like

Instead, ESLint can provide compile-time feedback and suggestions.

• Trying to call an API route from inside getStaticProps / getServerSideProps leading to next build failing.

  • Also related error → “Only absolute URLs are supported on the server”

• Trying to use getStaticProps inside of _app.js, assuming it works like the other pages, but it doesn’t.

• Forgetting to await an async function inside an API route, works fine locally but does out of band work which will cause issues if there’s multiple requests.

  • Code Example

    // Found on stackoverflow
    export default function handler(req, res) {
        const { method } = req;
        
        switch (method) {
            case 'GET':
    	   // but this is making a fetch and has no await....
                getRestaurants();
                break;
            default:
                res.status(405).end(`Method ${req.method} Not Allowed`);
        }
    
        function getRestaurants() {
            const restaurants = data;
            res.status(200).json(restaurants);
        }
    }
    

• Using document or other browser APIs outside of useEffect

• File name casing (e.g. myFile.js vs MyFile.js). This could potentially be solved with linting if import statement diffs from the actual file path? Not sure.

Describe alternatives you’ve considered

N/A

[nguyen-michael]

@leerob

Thoughts on a rule that lints if next/image is using layout= fill or responsive but isn’t setting explicit sizes prop?

Docs state:

A string mapping media queries to device sizes. Defaults to 100vw. We recommend setting sizes when using layout=“responsive” or layout=“fill” and your image will not be the same width as the viewport.

The rule could be opted into as a warning and reminder to set proper sizes or risk loading images that are too large if they’re not going to be 100vw.

I’ve got a working implementation of this rule in a custom ESLint plugin stored on a private repo but would happily put it up for review if you think it would be handy!

[LetItRock]

hi all! @leerob I would like to try to implement this rule: Another one: throw an error if using fs or other node packages on the client side.

Just to clarify, the rule should not allow using node built-in modules inside the react components, but will allow inside the other files like ex. utils, API routes and inside the data fetching functionsgetStaticProps, getStaticPaths, getServerSideProps is that correct?