RFC - ESLint plugin for Next #11731
Replies: 4 comments 3 replies
-
Maybe it is also interesting to tackle some of the common errors also during development by means of this plugin? |
Beta Was this translation helpful? Give feedback.
-
It will be great to also use this to warn about deprecated features, e.g. use getServerSideProps or getStaticProps instead of getInitialProps (yes, it's not actually deprecated but the general recommendation I believe is to use one of the new methods). |
Beta Was this translation helpful? Give feedback.
-
Not sure if these categorize under "conformance", but some more lint ideas that have popped up before: |
Beta Was this translation helpful? Give feedback.
-
It seems that the Chrome team has already started, see #11986 |
Beta Was this translation helpful? Give feedback.
-
Goal
Build an Eslint plugin for NextJS that includes specific rules to help report common conformance mistakes that we’ve noticed users make during development time.
Summary
Our initial efforts to add conformance checks to NextJs resulted in building a webpack plugin - webpack-conformance-plugin, which runs as part of
next build
and reports errors/warning as part of the build output.There were two main issues with this
An ESlint plugin would help us solve both these issues. The plugin would give development time feedback to users (even in their editors) and avoid any rework related to best practices enforcements from conformance. The plugin also offloads conformance checks from the
webpack-conformance-plugin
and moves it into ESLint plugin which will reduce the build times when we run build-time specific conformance checks.Approach
We identify conformance checks that can be run during development time and move the checks into the new ESLint plugin for NextJs called
eslint-plugin-next
.We then integrate this by default in
create-next-app
and also make community suggestions to adopt the ESLint plugin for older apps and those who prefer not to usecreate-next-app
Impact
We’ve encountered many NextJs sites that have impacted core web metrics metrics because of some simple mistakes.
Some Eg:
a
tag, causing full page refresh for NextJS apps.The ESLint plugin will help catch a subset of these issues early on and also provide some baseline recommendations/best practices to write code in NextJS.
Another benefit will be offloading work form the
webpack-conformance-plugin
, which would make build time conformance checks faster.List of ESlint plugins (WIP)
All of core NextJS scripts are loaded async. Any user added script tag without a async/defer attribute takes priority over nextJS scripts and delays hydration.
We want users to import their CSS in recommended way using @import
NextJS preloads CSS and loads them with priority. CSS added with tags runs the risk of being loaded at a different priority and increasing FCP metric
tags cause full page reloads for SPA Next apps
as
attribute - Dynamic routes without theas
attribute can lead to broken links that do not hydrate and cause full page reloads when clickedWe've started work on these plugins and currently testing them with few Next apps. Also working to identify other ESLint rules that would help.
Beta Was this translation helpful? Give feedback.
All reactions