10 Next.js Tips You Might Not Know!

frameworks like nextgs can do a lot for you which means there's probably some features that you haven't used in this video i'm going to be covering 10 nexus tips that you might not know first up redirects so after next.js 9.5 redirects were added directly into the framework allowing you to take an incoming request and output it to a different destination so whether that's an internal path or an external path to some other website you have support to do things like path matching or wildcard matching for example if you wanted to do an entire directory of blog posts and an example of this would be for my website if i go to lerob.io youtube this is actually going to redirect externally to my youtube channel number two is rewrites and these were also introduced in next.js 9.5 they function similar to redirects but they work as a proxy so you specify some source and nexjs will take care of masking that and forwarding it to the destination so for example let's say that you are trying to incrementally adopt nextgs as part of your tech stack and you've rebuilt a new version of your documentation now all these links on this page don't exist in your new application so when i click on one of these links i actually want to forward it to the existing site but i want to mask the url so that it looks like the user didn't actually leave the site number three is preview mode so let's say you're working with a headless cms or some external data source and you want to preview a draft of your content now if you're working with static generation where the output of your website is just html files this actually doesn't work very well and preview mode solves that so preview mode allows you to see a statically generated version of this draft content for example if we go over to this demo we have a statically generated site and there's an edit button in the bottom right and when i click this edit button it allows me to edit any part of this page and then when i save it i'm going to get this unique url that's generated with preview mode so now if i copy this url and let's say i navigate here instead we're seeing this statically generated version of our application in preview mode with our unique content number four is hooking into the build process so i've pulled up some code for my personal site leerob.io which i'll link in the description below it's open source and when i'm running next build i want to generate a sitemap for my site now by overwriting next.config.js we can customize our webpack configuration and say when next build runs i actually want to run this node script so i have a simple node script here that generates out this sitemap but this could be anything it could be a sitemap script rss feed indexing a search with algolia anything while we're here in nexus.config.js we can talk about number five which is using preact so you can actually swap out react with preact very easily in next.js now the easiest way to do this in my opinion is you only swap it out in the client production build so by overriding webpack you can basically swap out and tell nextjs hey instead of looking at react just use preact instead now why would you do this in practice if you're not using any of the advanced react features preact will help you ship less javascript to the client which will in turn likely give you better performance so it's something to experiment and test out with on your site note that as newer react features come out like concurrent mode and react server components which i have a video on that i'll link below these may or may not be compatible with preact so use this at your own risk the sixth is absolute imports and module path aliases so rather than having to have multiple levels of nested paths so having import statements that might look like this which can get kind of out of hand you can use absolute imports and module path aliases to define where your folders are inside of either a jsconfig.json or a ts config such that inside of your components you can now use this nice shorthand notation to import your files number seven is a crud api route now crud stands for create read update delete which are common methods that you can use when building apis and what you're looking at here is a nexus api route a single file that allows you to handle all of the different types of methods so i'll put a get a post and a delete and what this might look like in practice is i have an api route here for views and if i call this with a post i want it to increment the views but if i call it with a get i actually want to fetch the view count so if i look at this view counter component i have you'll see i'm making a request here for a get which has a different behavior than when i call it here with a post the eighth is setting response http headers for both api routes and serverless functions so in this example i'm pulling the response variable and i'm setting a cache control header for this api route now what this means is when i'm on my dashboard and i'm fetching these subscribers you see i have a status of 304 which means it's not modified because this value has been cached the ninth is an interesting trick which can be used in a couple different ways so i'm just going to show you an example let's say i have pages index.js and i want to specify maybe a title description and image for my meta tags for open graph sharing on the web basically i'm able to export this function home from my component and i can set different properties on that function so maybe i want a title maybe i want a description etc now when you're using underscoreapp.js which allows you to share things between pages there is this component prop which is going to give you access to that title so you could use this to then create a shared layout for all their different components that have a dynamic title a dynamic description a dynamic image preventing you from having to do that inside of every single page file the tenth and final tip might blow your mind so i wanted to save this one for last you might have only used next.js on the web but what if i told you that you could build mobile like experiences with nexjs max who's the creator of ionic which is a framework allowing you to build native apps using web technologies has also created this library called capacitor.js and it can do some pretty interesting things so you can do things like hot module reloading with next.js and still get a native like experience with your app so the example he has here is using tailwind and it looks really cool i'm excited to see how this will progress and you know how close we can get to a native like experience i think there's some pretty neat things here like modals and swipe to close really long virtual lists all kinds of really neat stuff so check this out if you're interested in building native like experiences with next.js so that's it everyone hopefully you found these 10 tips helpful everything that i've shown in the video will be linked in the description below let me know in the comments if you'd like to see more videos like this thanks

Channel: Lee Robinson

Views: 29,796

Rating: 4.9847035 out of 5

Keywords: next.js, nextjs, vercel

Id: R59e1Vl5lO8

Length: 7min 43sec (463 seconds)

Published: Mon Jan 04 2021

Reddit Comments

[u/DasBeasto]

Awesome stuff! I use NextJS for basically all my projects. I found the "Shared Component Attributes" section super cool I've just been adding/overriding the Head in every page. And obviously the Capacitor mobile apps is crazy exciting. I've been wanting to to dive back into mobile app development and this might be a good change up from React Native.

[u/lrobinson2011]

Hey everyone! Happy to answer any Next.js questions. This video covers the following:

• Redirects
• Rewrites
• Preview Mode
• Build Process
• Preact
• Absolute Imports and Module Path Aliases
• CRUD API Routes
• Setting Response HTTP Caching Headers
• Shared Component Attributes
• Mobile Apps!?

[u/KremBanan]

Thanks for the video, but I didn't get the imports with @. You can already just do /components or /assets from your src root, what's the point of putting an extra @ in front of it

[u/chubbykc]

I'm currently playing with Nextjs and this is one excellent video man!

[u/p13t3rm]

Thanks for this Lee!

I read the Next docs quite a bit and almost all of those were new to me.

Excited to see what other cool stuff is under the surface. 👍

[u/newecomstartup]

Thanks for the free contents. I hope you produce another full course soon. Maybe with all these content as bonuses.

[u/wavefunctionp]

Great video, love next.

Not a fan of import aliases though. They are nonstandard syntax and will break tooling for things like automatic imports, type definitions and other ide features which now requires yet more configuration to fix.

Plus, it's another config file to go digging for to find where something is located. Where is @foo? Anyone's guess, it's completely arbitrary, so you have to look it up, it could be a top level folder or inside some deeply nested rats nest.

All of this because you couldn't be bothered to type out a path. IMO the real solution is to setup your editor properly to handle automatic import statements.

[u/anions]

Good bot man

[u/ck2fan]

Probably great tips but why isn't this an article I can quickly read while at work :)