What You Need to Know Before Learning NextJS

Summary

The 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

00:00

🌐 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.

05:01

🚀 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.

10:01

👨‍💻 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.

Keywords

💡React

React is a popular JavaScript library for building user interfaces, especially for web applications. The video mentions React in the context of comparing it with Next.js, emphasizing that React is the basis upon which Next.js builds. While React focuses on creating components and managing the state of an application, Next.js extends these capabilities with additional features like server-side rendering and file-based routing, making it not an alternative to React, but a complementary tool that leverages React.

💡Next.js

Next.js is a React framework that provides features such as server-side rendering and static site generation, aiming to improve the performance and developer experience of web applications. The video discusses Next.js as more than just an alternative to create-react-app or Vite, highlighting its role in simplifying the process of building React applications with advanced features like easy routing, improved SEO, and faster page loads.

💡Create React App

Create React App is a toolchain provided by the React team to set up a new React application with no build configuration. The video contrasts Create React App with Next.js, pointing out that while Create React App is a starting point for React projects, Next.js offers a more feature-rich environment for developing React applications, particularly with its support for server-side rendering.

💡Server-Side Rendering (SSR)

Server-side rendering is a technique used in web development where the HTML of a page is generated on the server and sent to the client, instead of being generated in the browser. The video highlights SSR as a key feature of Next.js, which allows applications to load faster and improve SEO by rendering content on the server before it reaches the client, solving a common problem faced by React applications built with client-side rendering.

💡SEO

SEO stands for Search Engine Optimization, a crucial aspect of web development that involves improving a site to increase its visibility when people search for products or services related to the business in search engines. The video emphasizes that Next.js improves the SEO of React applications by utilizing server-side rendering, which ensures that the content of the page is available to search engines when they crawl the site.

💡Routing

Routing refers to the process of selecting a path for traffic in a network or between or across multiple networks. In the context of web development, it involves managing the way users navigate through a web application. The video mentions that Next.js makes routing easier and more intuitive than React alone, particularly because of its file-based routing system that automatically routes files in the pages directory.

💡Static Site Generation (SSG)

Static Site Generation is a method of building websites where pages are generated at build time. The video briefly touches on this concept when discussing the flexibility of Next.js, which supports both server-side rendering and static site generation, allowing developers to choose the best approach for each page based on its requirements.

💡Hooks

Hooks are a feature introduced in React 16.8 that allow functional components to use state and other React features without writing a class. The video discusses using hooks and functional components as best practices in React development, which are also applicable in Next.js projects. Hooks such as useState, useEffect, useMemo, and useCallback are essential for managing state and side effects in React applications.

💡getServerSideProps

getServerSideProps is a Next.js feature that allows developers to fetch data on the server side and pass it as props to the page. This function is part of Next.js's server-side rendering capabilities, enabling applications to render pages with dynamic data from the server, thereby improving performance and SEO. The video explains this feature to highlight how Next.js enhances React applications by enabling server-side data fetching.

💡Client-Side Rendering

Client-side rendering is the process where the web browser downloads the minimal HTML from the server, and the JavaScript fetched thereafter renders the application UI. The video contrasts this with server-side rendering, pointing out the limitations of client-side rendering in terms of SEO and initial load performance. This context underlines the advantages of Next.js, which can overcome these limitations with its server-side rendering capabilities.

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]