How I fixed 47 errors in my code with Conformance - Kapehe (Next.js Conf 2021)
How I fixed 47 errors in my code with Conformance - Kapehe (Next.js Conf 2021)
Developers aren’t just developers anymore. We need to be good at performance of the website, making sure everything is secure, and guaranteeing the accessibility of it. Let me show you how Conformance with Next.js 11 helps us as developers achieve solid, safe, performant code. It’s a smooth DX to support optimal UX.
Kapehe
DevRel at Sanity
@kapehe_ok
Content
7.76 -> Oh hello there my name is Kapehe and I do
developer relations at sanity.io and this is Bella
14.08 -> she does developer relations for Scooby Snacks
I live in Los- we live in Las Vegas, Nevada
20.16 -> and the fun fact about both of us actually is we
both really love anime so in this talk we're going
24.96 -> to cover conformance in Next.js come with me.
29.247 -> Alright so like I said this talk is on conformance
32.56 -> and conformance is new to Next.js and it's
a beautiful addition if I do say so myself
37.6 -> oh and this is Heelo, Heelo loves treats as you can
see so a quick history on conformance Google had
43.36 -> a small team of very experienced developers who
did all the extensive code reviews of course of
49.52 -> course and would flag anything that impacted app
quality so they thought why not take the common
55.84 -> things that were being found and make a system
out of it thus the conformance system was born
61.68 -> so this automated an enforceable system
ensured a consistently high bar for app quality
68.32 -> that's pretty nice so Google's web
platform team experienced heavily
72.4 -> with Next.js and began open sourcing their system
so Next.js knew it was time to keep this to get
79.04 -> this automated system in Next.js and that's
what we are going to be talking about today
84.4 -> Here with me to explain this next part the most
important part is what is conformance is Poly, now
90.16 -> I don't want to call conformance a new feature
of Next.js because you can't really describe it
94.88 -> as a feature it's more a system a system that
solves problems or points out problems in code
100.72 -> so there are rules that conformance follows to
support the optimal ux experience it catches
106.56 -> things that might only be caught from an extensive
code review or months down the road when a user
111.68 -> complains about an image not loading so some error
or warning messages you could see in your Next.js
118.08 -> app could be using an a tag to navigate to a
page rather than link from Next Link or using
125.2 -> a link tag for an external style sheet rather
than importing the styling files now there's a
131.36 -> lot of rules you can find that conformance would
help catch in your code so what I realize is that
136.4 -> having conformance is like having a senior
developer with me pair programming at all
141.52 -> times super nice and that takes me to the why
why does this even matter to me can you imagine
147.6 -> being able to have optimal code to create an
optimal experience for your users without having
152.64 -> to run it through another developer for a code
review now okay conformance doesn't take away that
158.16 -> need for the code review but it surely wipes out
a lot of the quick fixes to optimize your project
164.08 -> it takes the developer experience
of creating a website or project
168 -> and gives tips on how to improve your code
that ripple effects onto the users now the
174.32 -> user experience is optimized and they get security
accessibility and performance at a better rate
182.16 -> So added to Next.js 11 it was released on June 15,
2021 that means you may not be affected by this
189.28 -> yet so to do quick check look into your
package.json of your Next.js project
194.72 -> to see what version of Next.js you are running
if you find out that you're outdated that's okay
200.72 -> that's why we have the internet so you can learn
how to upgrade that awesome project of yours
205.12 -> and I'm going to show you exactly how that's
done but first let me tell you a quick story
209.6 -> so I got into tech about three years ago and
was first exposed to React then it was I was a
215.6 -> React fan from the beginning through and through
and then Next.js came along it's kind of a sweet
221.04 -> code love story but I'm grateful it didn't have
to become a love triangle between my first love
225.76 -> react and my new love Next.js because Next.js is
react so as Next.js gets better and more optimized
233.6 -> I realize how good it really is for us developers
and conformance is one of those like you shouldn't
239.76 -> have moments I get a better developer experience
by making sure my code is optimized for my users
246.16 -> it's too easy so one of my projects was
old Next.js it felt new to me though
252.32 -> but then I upgraded and I ran that
beautiful lint command and let me tell you
256.64 -> there's a lot of errors but I won't
tell you let me show you all that
263.6 -> Alright so to get our Next.js application
upgraded we are going to run the command
269.424 -> npm i next@latest react@latest react-dom@latest and
this is going to upgrade us to Next.js 11.
278.08 -> So now we are upgraded we are next going to run the
command npx next lint how do we like to configure
284.8 -> we'll do strict because that is the recommended
way and all of this is going to be added in
291.04 -> now we will need to run that command again in
order to get all of our warnings and our errors
296.64 -> to optimize our code so now that that's done
let's run it again running that next lint command
304.48 -> and there are all of the warnings and errors that
come from my application my Next app so let's go
313.28 -> through a couple of these so at the very top there
we go now we're at the top so one of them do not
319.36 -> use image uh tag use image from next image great
one custom fonts not added at the document level
328.16 -> this is discouraged and it tells you where to
go to find out more information and it tells
332.88 -> you which file this is in another one external
synchronous scripts are forbidden and again
338.88 -> exactly where to find more information about
that this assign arrow functions to a variable
343.84 -> before exporting we're going to actually look
at this one more in depth we'll keep scrolling
350.96 -> uh this is a good error the apostrophe this
can be escaped with the html character and
356.32 -> there's like a list of ones that you
can choose from here's a good one
361.28 -> React hook useEffect has a missing dependency great
warning and great to know let's keep scrolling
370.08 -> and we have a lot of these image elements
must have an alt prop don't forget those
375.6 -> alt props and we'll show an example of
that and my giant list of missing keys
383.36 -> uh will definitely want to fix those that's
probably all 47 just kidding I don't know
390 -> um so yeah that is my list of errors and warnings
so the first one let's look at assign arrow
396.56 -> functions to a variable so it shows us where to
find it that it's a warning so it's going to be
401.44 -> yellow and what the error is so we're going to
go to the file and we see under underlined in
407.44 -> yellow the error and what the warning was
so we're going to fix that by naming it
414.56 -> and best practices is naming our functions by
naming our functions we are able to debug better
419.76 -> and our code is optimized and organized so we've
named it with the function headline that one's
424.88 -> done next one the apostrophe can be escaped with
the html character and it gives you a couple of
431.28 -> options to choose from so we go into our code it
is an error so it's underlined red it shows the um
438.56 -> error and then quick fix view problem that kind
of stuff we've added in the HTML character and
444.16 -> now that error is gone so that's really awesome
because we want to have that HTML character in
450.8 -> there instead of the apostrophe next one is the
giant list of missing keys so we're going to want
457.28 -> to fix all of those because it could have the key
and if you look to the right you see all the red
462.32 -> for just this file where they're missing keys I'm
not going to show you me fixing each one of these
467.68 -> but as we add a key to each one of these that
red line will go away next we have do not use
475.2 -> image tag use image from Next Image and we
also have image elements must have an alt prop
480.96 -> so let's go fix that warning for both of those
for this one so we have both of the warnings pop
487.92 -> up when we hover and we have that yellow squiggly
line behind it so we know that we are in the file
492.8 -> that has the warning associated with it so to
fix it we import next image we use that image
499.6 -> and we also added in the alt prop so by
doing that we have optimized our image
506.48 -> handling in next and for accessibility
we have the alt tag so we're good to go
512.64 -> so there you have it Next.js comes with a handful
of awesome new features or systems conformance
517.92 -> being just one of them so go ahead hit that
upgrade command today and let me know about
522.8 -> your developer experience with Next.js 11 thank you
for coming to my talk my animals also thank you
528.56 -> you can find me on Twitter @kapehe_ok where I tweet all things tech working out and
535.2 -> miscellaneous stuff you never know I never know
mahalo for hanging out and we'll see you around
Source: https://www.youtube.com/watch?v=VT3Xx_1wyxA