Essential Nuxt Modules for Optimizing Your Next.js Project

so your project looks like this you just ran npx nuia knit and now you have a blank canvas to go with B bras on it's

nice having a clean slate but what about all the tools you need things like linting testing SEO and if I don't have

you use people will find out that I can't actually code well in this video I'm going to show you the modules that I

use on every next project and how I set them up so I split them into three categories things I view as essential

modules that help me build with best practices and then just things I like the First Essential is the n tawin

module if you're using tawin it's no-brainer all you have to do is install it and then you can start using TA in

your app it adds a default configuration that accounts for n project structure and you can customize your theme through

a tawin config file or even directly in your n config but the feature that gives it that nice little extra drip is that

it gives you a Tailwind viewer with aore Tailwind route or it's even accessible in a tab in the dev tools the next

essential is one I guess they all could have predicted but the Vu use module it Auto Imports Vu into your app and I'm

not going to say much more than that if you like V you'll love Vu so there you go next up we got the nxds lint module

this is relatively new coming out earlier this year but it provides a lot of project wear and N specific defaults

for eslin this includes a lot of rules specific for View and N so as soon as you add the module we'll have eslint

available in our project it's also easy to customize it's built for ES Lin's new flat config format and as soon as we run

our project's Dev command this es Lin config file gets created and now we can either appen some flat configs Preen

some or override specific rules overall because of its good defaults it makes working with es lint inside of a X

Project a lot easier the next thing I want to talk about is testing I'm going be honest for the longest time testing a

NX 3 app kind of sucked but that Chang Chang when the next test utils module came out so once we install all the

dependencies and add the module this adds v test to our app allows us to run test in a n environment and also has

great end testing and these last two points are crazy helpful running your test in a n environment means that

before certain tests run a global Nu app will get initialized so if your app relies on Nu composes like use runtime

config or even uses Auto Imports which is n specific this is how you can write your tests I remember before this module

came out and you either had to have explicit Imports or have some sort of global Mock and it just got really messy

and gave me an excuse not to test but with this module you don't really have to change a source code and things will

just work on a new project this is the code snippet that I like to try out first where we set the vest environment

to n and then Mount the default laop view and expect it to contain welcome to Nu the module also supports end to end

testing with vest just cucumber and playright as test Runners testing your n project could be its own really long

video but this module made it so much easier than it was before now let's see some of those modules where n really

flexes its magic and those are the modules that make it super easy to follow best practices starting off with

nux fonts it's a zeroc config way to work with web fonts that makes them nicer to work with and also reduces

cumulative layout shift once we add this module anytime we use a font family in our project Nu fonts will load it from

one of its providers this makes it easy to switch between fonts from different providers like Google fonts or Bunny and

also when we build our project the font files will get downloaded so your app w't have to make any external requests

which can improve the performance and privacy of your app also in using web fonts there's a problem of cumulative

layout shift before the web font loads there will be some sort of fallback font and if that has a different size on your

web font the layout can shift under the hood Nu font uses Fontaine and cap size to force the fallback font to be the

same size as your web font so when that switch happens nothing in the layout changes if you want to hear more about

how well this works Daniel row goes over a lot of it in his latest vcom talk the next module here is the Nu SEO module

and this module actually adds six other modules to your app that let you follow the best SEO practices with minimal

configuration these are n robots which handles a robot pxt and The Meta tags nuok site maps that help you build your

site maps from pre-rendered and dynamic routes nuok schema.org which takes the content of your pages and this

composable to generate structured data for your site no link Checker which helps you identify broken link string

development and can also scan your links when your project builds Nu OG image which lets you create Dynamic OG images

for your site using a view component and finally Nu SEO experiments which contains some things like use SEO meta

and also nexs inspired metadata files you can either use all of these modules or disable whichever ones you don't want

but the next SEO module has everything you need to handle all those metat tags and fancy SEO stuff in your site and the

third tool I use to implement those as practices is n scripts I made a full video about it but to sum it up it lets

you load third party scripts with better performance privacy security and DX it lets you have more control over when

third party scripts load like you can delay after the initial hydration or wait for user consent it bundles third

party scripts during the build to improve loading times and minimize user data exposure it has a script registry

that has built-in composes and components for popular third party scripts I use it for plausible my

Analytics tool and YouTube embeds and it's nice to know that not only is it simpler to use but it also has great

performance and then the final category of modules I want to talk about are just things I like these aren't necessarily

things I think every project should have but I use them all the time the first one is n icons which gives you easy

access to all the sets and iconify it has an icon component we give it the name of an icon and Bam icon go on

screen it also has support for custom svgs and lets us have some control over how things bundle we can bundle as an

mic serve them from a remote CDN and for super commonly used icons in our app we can even include them in the client

bundle to avoid extra Network requests and then rapid fire through some of the other modules I like there's Auto

animate which lets you have good-looking animations with a single directive no color modes for setting up light and

dark themes and of course as a Content guy I love n content some of the other tools on this list like Nu SEO have

really good first-party support for n content and things like setting up the meta tags will just work and have

defaults since they're all built by the N team so now that we've talked about all these really good modules what's the

best way to use them on all your projects one way is to have a NX layer that's shared across multiple projects

that contains all of these shared modules or you could have some sort of script or Alias that just npx Nuy module

adds all of these or the third alternative is you can go to the dev tools and add them there I think it

would be cool if the npx noit command could have a more interactive experience where common things like Tailwind esent

or test utils could be added through the CLI when your project gets created I hope this list either gave you some

validation on the tools you're using or gave you some ideas on tools tool you want to try in your project thanks for

watching and like And subscribe for more content