What is Next.js and should you use it instead of plain old React? The short answer is yes, you definitely should!
#nextjs13 #nextjs #nextjstutorial
And if you want to know more, I’ll give you 10 reasons why Next.js 13 is the best React framework for your web projects. And the best part is, if you already know React, you can start using Next.js right away.
Chapters:
0:00 - Intro
0:30 - What companies are using React and Next.js
01:20 - React is a library and Next.js 13 is a full-featured framework
02:24 - Server Components in Next.js 13 - advantages
04:00 - SEO features of the Next.js 13
04:40 - Routing system in Next.js 13
05:32 - Building APIs in Next.js 13
06:07 - Data fetching functionality of Next.js 13
07:35 - Support of the TypeScript by default in Next.js 13
08:03 - Built-in styles support in Next.js 13
08:28 - Built-in builder/compiler in Next.js 13 (Turbopack)
08:55 - Optimization in Next.js 13 (Images, Fonts, Scripts and so on)
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!
✅ Follow Me:
LinkedIn: [ Ссылка ]
Github: [ Ссылка ]
☕ Buy Me A Coffee: [ Ссылка ]
React is a JavaScript library for building user interfaces. To paraphrase that - the main goal of React is to build the UI components and render it in a Single Page Application manner
Next.js on other hand is a full-featured framework for building web applications. React is still the foundation. But the structure and navigation - the architecture - are defined by Next.js.
Next.js 13 provides a new approach to render UI interfaces based on Server Components. Server components are the default ones in Next.js, but you can use client components any time you want.
The approach of Next.js is that all the components should be rendered on server by default, because there are a lot of parts of the UI which doesn't change - for example Header, Footer, Sidebar, Navigation and so on. But if some components need to be more interactive (buttons, inputs, parts of tables which are filled-in with data from an API) - only those components should be the Client ones.
Since we covered the render principles of the Next.js, very important thing to mention is that server-side rendering by default is very good for Search Engine Optimization. We all know that traditional React apps are not SEO ("Эс-И-Оу") friendly. This is because ALL the content on a page is generated from the JS file in the browser. Next.js is made to be SEO friendly out of the box with its Server components and special features for providing Metadata to the browser.
One of the big differences of Next.js in compare to React is that it has a built-in routing system. learn more It is a part of architecture which serves two purposes:
- create an organized routing for your application based on folders structure
components files and folders will follow the exact same structure which is logical and readable.
The part of the Routing system in Next.js 13 is the built-in functionality for creating an API. learn more This among other features makes Next.js a full-stack framework. The syntax and functionality of creating API routes in Next.js is very similar to Express library.
All we have to do is to create typescript files with handler functions in the /api folder. And Next.js will treat them as API routes, not pages.
Another huge difference and benefit of Next.js 13 is its data fetching functionalities and approaches. link The key points here are:
In most cases we fetch data in Server Components. In this scenario we have direct access to backend (databases) and all the Node.js functionality. We can also make multiple data fetches performed on server side and only then return the resulting HTML to the client.
Next.js is supporting TypeScript language out of the box. link In fact, Next.js is encouraging developers to write code using TypeScript, because there are integrated types for pages, API routes, data fetching methods and so on. Next.js 13 creates new project with TypeScript by default. All you need is to write a command:
npx create-next-app@latest
If it comes to styling of our applications, we have support of different styling approaches right of the box. link These are:
CSS Modules
Sass
CSS-in-JS
Tailwind CSS.
We don't need to configure any of those, Next.js is doing this for us.
To compile and build the application Next.js 13 is using its own compiler written in Rust language. This makes it fast - documentation claims that it is 17x faster than Babel. link During development we can also enable Turbopack which now is in beta version. Now it is the fastest JavaScript bundler on the market.
Next.js provides several built-in optimization features for images, links, scripts and so on.
