What You Need to Know Before Learning NextJS
Summary
TLDRThe video clarifies that learning React is not a prerequisite for learning Next.js, as Next.js is built on React and enhances it with features like easier routing and server-side rendering. It emphasizes the importance of understanding the evolution of these technologies and staying updated with community trends. The video also discusses the benefits of Next.js for SEO and its potential to become more popular in the future, suggesting that React developers should familiarize themselves with it.
Takeaways
- 📚 You don't need to learn React before learning Next.js, as they are not alternatives but rather Next.js is built on top of React with additional features.
- 🚀 Next.js is more of an alternative to tools like Create React App or Vite, offering a more streamlined way to create React applications.
- 🌟 Next.js simplifies certain aspects of React development, such as adding routing, making it potentially easier for beginners to start with Next.js.
- 🔍 Knowledge from building React applications can be beneficial when transitioning to Next.js, as it provides a foundation for understanding the framework.
- 🎁 Sponsored by themeselection.com, which offers admin templates for React and Next.js, including a Material UI React Next.js admin template.
- 🛠️ Building a production-ready Next.js app can be challenging, but using templates can save time and ensure best practices are followed.
- 💡 Customizing templates is easy, and a bundle is available with pre-made templates and components for various projects.
- 📈 SEO is improved with Next.js due to its ability to do server-side rendering, unlike client-side rendering in React which can result in empty initial HTML.
- 🤔 It's important for developers to understand their proficiency level with React before transitioning to Next.js to avoid just learning the basics of both and not excelling in either.
- 🌐 Keeping up with new technologies and understanding their advantages is crucial for web developers aiming to excel in their field.
Q & A
Is it necessary to learn React before starting with Next.js?
-No, it is not necessary to learn React before learning Next.js. Next.js uses React as its basis and adds more features to it. It is more of an alternative to tools like Create React App or Vite for building React applications.
What is the main difference between React and Next.js?
-React is a JavaScript library for building user interfaces, while Next.js is a framework that simplifies building React applications. Next.js provides features like easy routing and server-side rendering, which are not present in basic React setups.
Why might a beginner find it easier to learn Next.js compared to React?
-Next.js has beginner-friendly features such as easy routing and server-side rendering that simplify the development process. These features are not as straightforward in basic React setups, making Next.js potentially easier for beginners to grasp.
How does Next.js benefit SEO compared to a typical Create React App website?
-Next.js supports server-side rendering, which means that the initial HTML sent to the browser includes the UI elements. This allows search engines to index the page content effectively, leading to better SEO rankings. In contrast, Create React App relies on client-side rendering, which can result in empty initial HTML and poor SEO.
What is server-side rendering and how does it help with SEO?
-Server-side rendering is a technique where the server generates the full page HTML before sending it to the client. This ensures that the content is available in the initial HTML load, which is beneficial for SEO as search engines can crawl and index the content easily, leading to better rankings.
What is the role of 'get server-side props' in Next.js?
-In Next.js, 'get server-side props' is a method that allows you to run React components on the server to generate HTML before the JavaScript executes. This enables the sending of fully loaded HTML to the client, improving SEO and user experience by having content available before JavaScript is loaded and synced.
Why is it important for developers to keep up with new technologies and trends?
-Keeping up with new technologies and trends is crucial for developers to stay competitive and provide the best solutions. Understanding the advantages and disadvantages of new tools helps developers make informed decisions about which technologies to adopt for their projects.
What advice is given to developers who feel they know enough about React but are considering transitioning to Next.js?
-Developers should assess their current skill level and understanding of React before transitioning to Next.js. It's important to not underestimate the depth of knowledge required and to ensure that one is not merely shifting from one framework to another without a solid foundation.
How does the speaker suggest developers should approach learning new technologies?
-The speaker suggests that developers should obsess over the community and the learning path, continuously updating their knowledge and understanding of new technologies. This proactive approach helps developers stay ahead and make informed decisions about which technologies to adopt.
What is the significance of Google Trends data for developers?
-Google Trends data can indicate the popularity and growth of a technology, which can guide developers in their learning and adoption decisions. For instance, the speaker notes that Next.js is gaining popularity over React, suggesting that it might become more dominant in the future.
How can developers ensure they are not just learning the basics of a technology but truly mastering it?
-Developers should hold themselves accountable, assess their understanding of core concepts and best practices, and continuously challenge themselves with more complex projects. They should also engage with the community and stay informed about advancements and trends in their field.
Outlines
🌐 Is Learning React Necessary Before Next.js?
This section clarifies a common misconception about Next.js and React, emphasizing that they are not alternatives but rather complementary. Next.js, built on React, offers an enhanced development experience with features like easy routing. The presenter argues that it might be easier to start with Next.js due to its beginner-friendly aspects. However, existing knowledge from React, especially through Create React App, can make learning Next.js smoother. A special mention of a sponsor, ThemeSelection, is made, showcasing their React and Next.js admin templates which could significantly reduce development time for new projects.
🚀 Next.js: Bridging the SEO Gap in React Apps
This segment discusses the limitations of client-side rendering in React, specifically its negative impact on SEO due to search engines' inability to index content that isn't initially present in the HTML document. Next.js is presented as a solution through its server-side rendering capabilities, which can pre-render pages for faster loading and better SEO. The presenter urges understanding the importance of server-side rendering and its implications for web development. There's also a cautionary advice for developers to deeply understand React before jumping to Next.js, highlighting the risk of accumulating superficial knowledge across multiple frameworks.
👨💻 Closing Thoughts and Call to Action
The final section wraps up the video with gratitude towards the sponsor, ThemeSelection, and encourages viewers to explore their products. The presenter reflects on the importance of staying updated with evolving technologies and the potential of Next.js (or similar frameworks) to dominate future web development trends. The segment concludes with an appeal for viewer engagement through likes, comments, and shares, emphasizing the value of community feedback and participation in guiding future content.
Mindmap
Keywords
💡React
💡Next.js
💡Create React App
💡Server-Side Rendering (SSR)
💡SEO
💡Routing
💡Static Site Generation (SSG)
💡Hooks
💡getServerSideProps
💡Client-Side Rendering
Highlights
You don't need to learn React to start learning Next.js, as they are not alternatives but rather Next.js uses React as its basis.
Next.js is more of an alternative to create-react-app or Vite, offering a different approach to building React applications with additional features.
Learning Next.js can be easier for beginners due to its friendly features, such as easy addition of routing compared to React.
Knowledge from building React applications with create-react-app can be beneficial in learning Next.js more easily.
This video is sponsored by themesolection.com, which offers admin templates for projects and businesses, including a Material UI React Next.js admin template.
The templates provided by themesolection.com are made with the latest versions of technologies and include best practices for React, such as using Hooks and functional components.
Using a template like those from themesolection.com can save time in building a production-ready and functional Next.js app.
The video discusses how a page loads in React using client-side rendering and the issues with this approach, such as poor SEO ranking due to empty initial HTML.
Next.js offers server-side rendering, which allows for fully loaded HTML to be sent before JavaScript is loaded and synced, improving SEO.
Server-side rendering with Next.js solves a major issue with React by providing SEO benefits and ensuring that the initial HTML includes all necessary content.
The video emphasizes the importance of understanding why you're learning Next.js to maintain discipline and motivation in the learning process.
For developers who know React but aren't proficient, transitioning to Next.js without a solid understanding of React can lead to only knowing the basics and not excelling in either.
The video encourages developers to stay updated with new technologies and understand their advantages and disadvantages over current tools.
Next.js or a variation of it is expected to become more popular in the future, as seen in trends comparing React.js and Next.js.
The video concludes with a recommendation for React developers to familiarize themselves with Next.js to stay ahead in the field.
A call to action is made for viewers to check out themesolection.com and take advantage of a special offer for the first 100 people using a code from the video description.
The video ends with a thank you note to the viewers and the sponsor, emphasizing the importance of community and continuous learning in web development.
Transcripts
so if you clicked on this video I assume
you want to learn next.js but you want
to know if you need to learn react
before that or how much of react you
need to learn before starting to learn
next so the first thing I want to say is
that you actually don't need to learn
react to start learning xjs especially
because people mistakenly think that
react to next.js are alternatives from
each other when they are really not I
would say next is more of an alternative
to something like create react tap or
something like Vite because it is more
of a way to create your react
application rather than something that
is different from an app that is made
with react actually next uses react as
its basis and it changes some of the
things and adds more features to it so
for that reason it is not necessary to
learn react before next in fact I
actually believe it's easier to learn
nextges compared to learning react
because it has some very beginner
friendly features such as the fact that
you can really easily add route to it
compared to react but all of this
doesn't mean that you can use some
knowledge you gained from
um building react applications using
something like create react app to
actually learn next in an easier way and
at the end of the video I'll even let
you all on an advice for the future but
for now here is everything you might
want to know before learning next chance
[Music]
[Applause]
[Music]
[Applause]
this video is sponsored by
themesolection.com if you're looking to
get any admin template for your projects
or your business you should check them
out for example they have an amazing
material UI react next.js admin template
for anyone who is looking to build a
really nice Project without having to
spend a lot of time building the main
core features the templates are all made
with the newest versions of their own
Technologies for example this one I just
said is made with the latest version of
react and material UI and it also
includes a lot of the best practices
that are already set for react such as
building your templates using Hooks and
functional components building a
production ready and functional next.js
app is really hard so using a template
like the ones they provide can really
save a lot of your time it is also
really easy to customize your own
template so if you're interested they're
currently releasing a bundle which will
give you eight pre-made templates with a
lot of pre-made components that you can
use inside of any of your projects and
if you decide to use the code that is on
the description you will get 15 off if
you're one of the first 100 people who
would click the link in the description
trust me when I say they have a really
really nice product and if you're
actually building something that will be
used by a lot of people you really don't
want to play around with it you might
want to get something like this to help
you save a lot of time again thank you
theme selection for sponsoring and let's
get into the video so the first thing
that you really need to understand
before starting to learn next is exactly
how does a page load in react so when
you load a page
um using client-side rendering in react
normally what would happen is the
following imagine an example where you
have a page where you wanna fetch data
for for example the list of friends from
a user and then just display that data
in that page so if you're using
something like create react app to
create your react application and you're
loading and rendering everything from
the client what would happen is the
following first
um you would make a request the page
would make a request to receive the HTML
and it would receive an HTML completely
empty basically it will be just an empty
HTML with a single div with an idea of
root and nothing inside of it and then
it will also have some scripts I'm
fetching all the JavaScript that we have
for our application you can even check
this by actually going to any website
that was created using Create react Tab
and just trying to download the source
code you'll look at it and you'll be
confused because none of the UI elements
will actually be in the HTML because
they don't exist initially the HTML is
completely empty so the source code
obviously won't have any of that what
react does is it then loads the
JavaScript from the JavaScript script
tag and further fetches the list of
users so only after the HTML is received
by the browser they actually downloads
all the JavaScript and fetches the data
and puts it inside of the inside of the
actual Dom so that's the thing you only
get the correct UI elements after the
data fully fetched and the initial HTML
doesn't include that stuff and that's
that's a big problem to be honest so for
example when a search engine like Google
tries to rank their websites based on
keywords what they do is they download
the source code and uses that as uh
basically what keywords that website
contains but the thing is a normal
create react app website won't have
anything inside of their HTML inside of
their source code initially so they will
rank poorly on SEO standards and Google
will basically not show the page because
it doesn't know what the page is about
because there's no keywords there's
nothing it's just a mess there's a lot
more to it but the thing the main issue
in this case is that you're rendering
everything in the client and
um there is a solution to it which is
what next allows us to do because next
actually has a lot of flexibility it not
only allows you to render Pages
statically through the client but it
also allows you to render your pages
from the server which is also known as
server side rendering so if you have a
page that is not static such as the one
then from the example and it's not a
static because it constantly changes the
the values of it depending on the data
it fetches right you can use a method
from next.js called get server-side
props which allows us to run react on
the server and send back the fully
loaded HTML before the JavaScript is
loaded and synced which means that we
will have everything loaded into our
source code before
um actually trying to sync everything
with JavaScript which is good because it
will rank higher it will have good SEO
and everything is already there a good
example should be shown in the screen
right now of how this would work and how
what's the difference is but it allows
for this which is amazing this is
actually one of the main reasons people
choose to use an xjs because one of the
main issues with react is now solved and
there's basically no downside to it so
honestly I don't see the point of using
normal like create create react tab
instead of next.js when it's hard to
find the negatives
um in this case and it is important to
understand this before learning next
because there will be no purpose when
learning next if you don't understand
why you're learning it so understanding
why you're learning it is fundamental
and crucial for you to actually have the
discipline and motivation to learn this
framework that being said if you are a
developer who um already knows a little
bit of react but isn't really like good
at it you just know how to make simple
websites with it and you already want to
transition to next I would say to stop
and really think what you're doing
because it is really easy for any kind
of web developer to really confuse how
much they actually know right not
actually know enough and think they know
more than they actually do I actually
did this because uh on while I was
learning react six months in I thought I
was already pretty good with react but
at that point I didn't know some of the
most important features of react like
when and where to use some of the hooks
like use memo and use callback I didn't
know that and I considered myself
intermediate to Advanced in react which
is crazy to me now because there's
always a lot more to learn so you have
to understand where you are and you
can't be transitioning from one
framework to the other and just learning
the basics because then you just know
the basics for everything and not be
good at anything so I'm saying this
because I know there are a lot of
developers out there that do this and I
did this too so being able to tell
yourself and understand and kind of hold
yourself accountable in that case is
really important as well so what's the
point of this video you might ask
because I just told you that you really
don't need to know react before learning
xjs and again when I say react I mean
um the create react tab ecosystem
instead of react as a whole because
nexjs uses react right but the point is
the following technology will evolve as
we go right I started learning react
three years after it got released I
believe and
um now I already see Trends showing that
uh react normal react direct that I've
always known might not be the future now
does that mean that we should stop
learning react and keep switching to the
new thing that is arriving all the time
no that doesn't mean that especially
because imagine if you're a big company
with a huge code base you're not gonna
like the resources for you to switch
from one framework to the other just
because of minor improvements is crazy
so like react normal react will still be
used a lot
um in reality right but one of the
things I preached the most about for
people who are trying to really get
really good at web dev is to obsess over
the community and obsess over
um The Learning path because if you just
want to be a programmer who learns
whatever you're learning does your job
get paid and that's fine that's fine a
lot of us do this too but if you really
want to get be the best at what you're
doing you really have to obsess over it
and understanding and keeping up to date
with the new technologies and exactly
why they are better or worse than what
we have right now is really important
and I feel like if you are a react
developer and you don't know next yet
that's definitely something you should
get your hands on because maybe that's
not the future in the next one year or
two years but trust me something either
next or a variation of next will
definitely be way more popular in the
future because we're already seeing it
if you look at the Google trends for
react.js and xjs nexjs is already
destroying react which is crazy right so
that's my rent for today and I really
appreciate if you guys liked this video
If you enjoyed the video please leave a
like and comment down below let me know
what you want to see next again thank
you so much for theme selection for
sponsoring this video
um you guys definitely keep the channel
rolling I really appreciate if you guys
could check them out they are really
nice and yeah that's that's basically it
I really appreciate you guys watching
this video and I see you guys next time
[Music]
[Applause]
[Music]
thank you
[Music]
5.0 / 5 (0 votes)