10 Next.js Tips You Might Not Know!

Подписаться 57 тыс.

Просмотров 70 тыс.

50% 1

Next.js can do a lot for you - which means there's features you probably haven't used! This video covers ten tips you might not know about Next.js.
0:00 - Introduction
0:09 - Redirects
0:44 - Rewrites
1:24 - Preview Mode
2:19 - Build Process
2:57 - Preact
3:48 - Absolute Imports and Module Path Aliases
4:21 - CRUD API Routes
5:06 - Setting Response HTTP Caching Headers
5:31 - Shared Component Attributes
6:30 - Mobile Apps!?
7:32 - Conclusion
Links
-----
1: nextjs.org/docs/api-reference...
2: nextjs.org/docs/api-reference...
3: next-preview.vercel.app/
4: github.com/leerob/leerob.io/b...
5: github.com/leerob/leerob.io/c...
6: nextjs.org/docs/advanced-feat...
7: leerob.io/snippets/crud-api-r...
8: github.com/leerob/leerob.io/b...
9: adamwathan.me/2019/10/17/pers...
10: github.com/mlynch/nextjs-tail...
-----
Blog: leerob.io/
Twitter: / leeerob
GitHub: github.com/leerob
Course: react2025.com/

Наука

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@LadislavSzolik 3 года назад

Yep, definitively more of this! It was very insightful. Btw... you communicate really clearly and understandable! Nice work!

@vs599318026 3 года назад

Lee, I wish I watched this video before I start build my Next App. That path aliases is so useful! Keep up the good work.

@rajandavis9294 3 года назад

I feel like the Vince McMahon meme were I progressively get my mind blown with every new tip (really impressed with the rewrites and preview mode). Thanks for sharing!

@senkasim 3 года назад

You keep my enthusiasm for software alive. I learn new tricks that I don't know about in every new video. Thank you for your effort 🙏. The Capacitor.js you shared at the end excited me. I am starting to investigate what kind of powerful feature more than react-native has.

@Max14211 3 года назад

I swear out of all the channels I subscribe to, no singular channel has taught me more than yours. Where Fireship is just short and fun or Traversy Media is far too basic your like the perfect mix of usable information delivered in a kick'back and chill kind of mood. I look forward to each and every one of your uploads and I thank you so much for all the hard work you have already given us. Thank You :)

@shiestypooo1016 2 года назад

Almost like….this guy literally works for Vercel the creators of Next.js and he’s doing this for a reason

@itsmannyb 3 года назад

Great video and tips Lee. Absolute imports and module path aliasing has been super handy for me, along with preview mode.

@rezaverse 3 года назад

seriously, by far, one of the best videos about nextjs. well done sir. well done.

@antonfenske7463 3 года назад

Keep going with these, please! 💯They are saving time around the globe! 🚀

@philippeaka2772 3 года назад

Top quality thank you Lee!!

@henriquematias1986 3 года назад

Nice video! Regarding. number 6, just change the baseUrl to src, remove all the paths and then you won’t need the @/ symbol at every import and it will basically have an alias for every folder on your src folder ( :

@philippeaka2772 3 года назад

the last tip is amazing!

@SamSverko 3 года назад

Amazing video! To the point, and provides a ton of insights and value. Thank you so much!

@dayone_1 3 года назад

Thanks a lot, Lee. You always deliver quality content. 🇰🇪

@finsflexin 2 года назад

I came into this thinking that I wouldn’t learn anything… holy crap, this is so valuable. You’re a legend.

@DerekBraid 3 года назад

Solid video, thanks for sharing! Keep em coming.

@Youtriguna 3 года назад

Thanks for the tip, esp., 3:48 Absolute Imports and Module Path Aliases is really helpful.

@GlenCodes 3 года назад

Definitely more vids like this, this is some good stuff

@RazerCrick 3 года назад

Definitely helpful mate... Keep up your good work 👍

@BrendonOtto 3 года назад

Yes, this was full of awesome information!

@lukor-tech 2 года назад

Very inspiring video! Thank you!

@JamesQQuick 3 года назад

Wow, this is amazing!!

@vuldislav8731 3 года назад

Thank you for your job!) Well done!

@superseaby 3 года назад

Awesome tips Lee !!!

@k2p11 3 года назад

Thanks, Lee! Definitely helped.

@HardcoreJapanese 3 года назад

Super helpful and to the point

@boredhuman23 3 года назад

It was really helpful, thanks. :)

@singhrahul 3 года назад

it was quite informataional, Using Preact was surprise for me, definitely going to give it a try. Thank you. there is only one question, I struggled with redirect and rewrites, I tried nextjs github example, but no luck.

@predaytor 3 года назад

That’s a lot of tips! Thx!

@rakeshpaul5691 3 года назад

awesome work Lee..

@Yassinebridii 3 года назад

I didn't know about the Preact tip, i used to swap react with Preact in dev mode. Having to work normally with Nextjs in dev mode, and swap with Preact in prod is pretty neat.

@leerob 3 года назад

Glad it was helpful! 🙏

@gholamrezadar 3 года назад

Thank you for the AMAZING Content!

@JacobEDawson 3 года назад

Nice one, going to add a sitemap hook into my build step!

@speednud3 3 года назад

Fantastic! Thank you so much

@RAMIN12207 3 года назад

Thank you for the high-quality videos What is your suggestion for a shared layout (like Header or MegaMenu) that needs a REST API calls for data, and maybe a footer? at SSR SSG ISR pages we need to fetch all that data on page load for every single page. Are there any best practices to handle this situation?

@Sindoku 3 года назад

Thanks Lee!

@mineevpavel 3 года назад

Shared component attributes are handy! I used to do similar things with sending it via GSSP/GSP and it was messy, your way much smarter.

@KevinOsterkilde 3 года назад

Thanks for the Algolia shoutout. ;)

@alfonsocartes1700 3 года назад

Wow! I definitely learned a lot from this video Lee! Where can I get more info about caching? I saw your code for multidomain using the domain as the input for getServerSideProps but I need access to the HTTP req. Can you point me to somewhere that extends on this?

@marcfielding2460 3 года назад

Yeah echo'ing the comments below you've got a talent for boiling stuff down, we're a startup on serverless nextjs doing static generation on 150,000 pages - some of the bits you've mentioned in your various videos are resulting in pieces of work for us. Certainly Preact is something we'd noted but not done anything with - having looked at the benefits in the short term it's worth a shot for pagespeed - although server components might end up being the one. Thanks a lot and subscribed!

@leerob 3 года назад

Feel free to send me a message if you have any questions!

@marcfielding2460 3 года назад

@@leerob that'd be very helpful my LinkedIn is: www.linkedin.com/in/marc-fielding-a8bb3293/ - we've launched today - now we might be looking to jump off AWS so i'd be very grateful for any conversations and of course with some of the cutting edge stuff we're doing it might even make some great content :-)

@Balance-8 3 года назад

incredible content

@mryechkin 3 года назад

Thanks for these Lee! How does Capacitor + Next.js compare to a pure React Native experience in your opinion?

@nanto88 3 года назад

Thanks! this is helpful

@MayankSharma-mb6vk 3 года назад

Thank you Lee, for these great tips and all the amazing NextJS content you've put out! The module path aliases are gonna help save a lot of time wasted on "../../.." 😂. I have a question, would it be possible to use module path aliases for NPM packages inside the node_modules folder? for example "material-ui/core"

@leerob 3 года назад

You shouldn't need to use them for NPM packages since there wouldn't be any nested paths. (e.g. import React from 'react')

@MayankSharma-mb6vk 3 года назад

@@leerob That's true for most cases but normal imports of mui go like ` import Button from "@material-ui/core/Button" ` so I thought lets try using a module path alias that goes "@/mui/*": ["node_modules/@material-ui/core/*"] and then the import becomes : ` import Button from "@/mui/Button" ` which has successfully helped me reduce 12 characters per import (lol which is useless in terms of performance) BUT now I know that It's possible hehe. You're right there's no need : P

@SamFromaway 3 года назад

Great video as always!

@othneildrew 3 года назад

Any tips on using module alias with typescript and vs code? Doesn’t play really well

@hariii5898 3 года назад

Lee, why should I move to next js over cra ? Curious, about your opinion.

@gvsakhil143 2 года назад

hei hi nice video.. Can I know how u made ur vscode look unique - imports are of diff color and functions are looking diff

@jii808 3 года назад

Lee, do you know if web sockets (socket.io) can be used with Next.js API routes without using a service like Pusher?

@bhatvikrant 3 года назад

Hey Lee, thanks for the awesome content! I had one question, What is your vscode theme? And what about those faded imports at the top? Is that an extension?

@leerob 3 года назад

Sorcerer! All info about my setup is here -> leerob.io/uses

@exactzero 3 года назад

@@leerob I installed Sorcerer. How do you fade out the imports?

@leerob 3 года назад

@@exactzero I haven't done anything extra besides install the theme!

@exactzero 3 года назад

@@leerob Oh. Guess it's something else in my settings. Awesome theme though, thanks!

@bhatvikrant 3 года назад

Hey! Thanks!

@dubba7451 3 года назад

How do I use the Shared Component Attributes dynamically? For example I want to get the title from the getStaticProps function.

@henriquematias1986 3 года назад

For the SEO, i think using SEODefault component from Next.js is likely the native way of doing it? No need to write that workaround yourself?

@HamaadSiddiqui 3 года назад

Maybe a video on building mobile apps with Next.JS in the future 👀

@rajashekhar433 3 года назад

Thank you for the video and i have few doubts 1. How to implement component level scss Index.js Index.scss 2. Next pwa Pwa + SW 3. Cache pages Thank you

@leerob 3 года назад

1. You can use `.module.scss`: nextjs.org/docs/basic-features/built-in-css-support#sass-support 2. PWA with `next-offline`: github.com/vercel/next.js/tree/canary/examples/with-next-offline 3. Learn about automatic static optimization. Static pages will be properly cached automatically when deploying with Vercel :) nextjs.org/docs/advanced-features/automatic-static-optimization

@majorhumbert676 2 года назад

Is it possible to run build scripts that are written in typescript? I wanted to build a sitemap, but my functions for fetching the static paths were written in typescript. I ended up calling the build script in pages/index.tsx (and outputting to public/).

@CheulongSear 3 года назад

Will Nextjs replace create-app-react?

@ys1197 2 года назад

What is that vscode color theme?

@phongnguyentuan8219 3 года назад

What is the theme that you are using? It has nice contrast and palette.

@leerob 3 года назад

Sorcerer

@phongnguyentuan8219 3 года назад

@@leerob thanks!

@chrisauret3785 2 года назад

Can anybody help with point 9 using Typescript? I really need this but am stuck on how to achieve this?

@jonathanweckerle8278 3 года назад

The 11th tip would be how to use the new Image component for static exports. Currently, these two widely promoted features (static exports and the Image component) don't work together, but this is nowhere officially mentioned, and there are many Github issues and discussions, but no clear answer why this doesn't work, and whether or not it will work in the future.

@BodrumDrone 3 года назад

The only time I need it is on my video card, congratulations

@Royjce 2 года назад

absolute imports helped me lol! i had import icon from '../../../icons' ;

@snazzybytes602 Год назад

How to redirect with target blank aka new window with just config? No way I see, middleware method code redirects only right? (Sorry, backend mostly here picking up some UI skills slowly)

@chrisryu2179 2 года назад

Could you make a video of SEO for Next.js please?

@leerob 2 года назад

nextjs.org/learn/seo

@rezahosseini7851 3 года назад

With Capacitor I think you can't have serverless functions which is really bad. Am I wrong?

@mohdahmad 2 года назад

how to scroll to where left in next js while ssr

@mohammadaqib9097 Год назад

@leerob can we have the latest version of this, please?

@yashchauhan5710 2 года назад

fs is not availabe in next js help me please

@DrNoxer 2 года назад

The fact that we are expected to write conditional logic to go into POST; GET, etc. Is equivalent to PHP 20 years ago. It's 2021.

@ThomazMartinez 3 года назад

How can i block certain IP's from accessing Next.js routes?

@DJDavid98 3 года назад

Depends on how your site is deployed. If it's hosted on Vercel (or behind some kind of proxy) read the value of ctx.req.headers['x-forwarded-for'] (do note that this header can be spoofed by less trustworthy proxies) in getServerSideProps. If users connect to your next server directly then use ctx.req.connection.remoteAddress which will always be the public IP of the connecting user.

@ThomazMartinez 3 года назад

@@DJDavid98 "If users connect" is that using Postman or something similar?

@gofudgeyourselves9024 3 года назад

More videos plzz

@leerob 3 года назад

Many, many more videos this year!

@highzenburger1829 3 года назад

make a Udemy course if you can of Next.js with redux etc.. I'd totally buy.

@klin-coders9374 3 года назад

timestamp for myself 3:50

@othneildrew 3 года назад

Short vid, just the tip(s) the way she likes it lol

@ApoorvMote 3 года назад

Every single tip was mind blowing actually. But I felt that you went too fast and I needed more examples to understand. So I rewatched the video 3-4 times. So if you can then please add more example to drive the point home. But I really mean it this was jampacked with good tips.

@texeltexel2009 3 года назад

One stormtrooper missed the Like button.

@OkKillionaire 3 года назад

Not sure how some of those are unique to next js? CRUD route? you wrote that, that's not a next js specific thing..

@DJDavid98 3 года назад

"This can be useful for dynamic titles, descriptions" You're literally importing next-seo dude

@leerob 3 года назад

I know, I could probably remove it now :) `next-seo` is still nice for JSON-LD, though: github.com/garmeeh/next-seo#json-ld

@DJDavid98 3 года назад

@@leerob No, I meant, why would you ever go for attaching random properties onto your exported component when there is a perfectly good package for it? TypeScript would not like that advice for sure