• nextjs extends react with additional features.

• why NEXT JS is the future of the web and

• why if you're not using it correctly you

• you must start doing so right now

RELATION

• To be a next js developer you need to know react.

• React is the base for NEXT JS

• it's similar to react in JavaScript

• you need to know JavaScript to become a react developer

• This doesn't mean react is same as JS.

Server Component (SSR)

• react isn't designed for SSR at least not right now

• they have only shipped the react server components in the NEXT JS app router

• and react team even said that they recommend using an existing framework

• SOLUTION: App Router in NEXT JS

• 

WHY NEXT JS

• Implement server side / backend task.

• Improve dev. experience

• Optimizes performance

Hence, we must change our way of thinking and approach building nextjs application differently than we approach building react applications especially the server side aspects

Benefit #1: Client side or Server side Rendering

the goal is not to eliminate hooks we still want to use them when managing:

• State

• effects

• browser events

Client side means

executing the code on the user browser this means that the server sends the HTML CSS and JavaScript code to the client then the browser executes the JavaScript code and the page is displayed

Server side means

• The server executes the JS code pre- renders the content and sends the pre-rendered HTML file that doesn't mean it doesn't send JavaScript files at all it still sends some but a lot less

• This leads to the page loading faster because the user's browser doesn't have to download a bunch of JavaScript code and executed to render the page

• fully rendered HTML to the client's browser enabling immediate display this distinction highlights an essential aspect of web development SEO search engine optimization, search engine crawlers face difficulties indexing Pages dynamically rendered on the client side as a result the SEO performance of such pages may suffer as search engines may not fully comprehend their content and rank them appropriately by utilizing NEXT JS this issue is resolved by sending pre-rendered code directly to the client this enables easy crawling and indexing by search engines

SEO: crucial for optimizing website's visibility and ranking in search engine results

• increased organic traffic

• enhanced user experience

• credibility and trustworthiness

• competitive Advantage due to higher search result rankings

Example

Making a form server side:

• interactive

• handle events

• send data

you get better with writing server side NEXT JS code

you will get better with transforming things that maybe don't need to use client to use the server

• instead of making the whole masterclass page on the client side with use client we're only rendering the form or the modal on the client side

• the rest of the page can be static and can be rendered on the server side leading to better performance

• that's the beauty of NEXT JS architecture you can choose where to render even the tiniest element

Benefit #2: ROUTING

• React depends on additional package called react-router-dom

• In NEXT JS, uses file-based routing system.

  • each folder in the app directory becomes a route and the folder name becomes the routes path

  • for example if you have a folder named about in the app directory you can access that page at the forward

  • No need for external packages or complex configuration

FULLSTACK DEVELOPMENT

Certainly! Let's enhance and clarify the content:

"Next.js is a full-stack JavaScript framework that seamlessly integrates both the server-side and client-side aspects of web development. By default, Next.js employs server-side rendering (SSR) through its server components, which means that the server is responsible for rendering the complete HTML page.

This unique architecture eliminates the need for a separate backend or frontend server. When a user makes a request, the server can dynamically generate and serve fully rendered HTML pages. This not only enhances performance by reducing client-side rendering but also ensures a smooth initial loading experience.

On the client side, Next.js allows the inclusion of client components using the 'use client' directive in the code. These client components are written in JavaScript and provide a dynamic and interactive user experience. They are executed on the client's browser, allowing for real-time updates and interactions without the need for a separate backend API for every user interaction.

In summary, Next.js brings together the best of both worlds – the server-side rendering for efficient initial page loads and client-side components for dynamic, interactive features. This unified approach simplifies development, promotes better performance, and eliminates the need for maintaining separate backend and frontend servers in your application architecture."

Benefit #3: API ROUTES

enabling the creation of serverless functions to handle API requests

serverless APIs in NEXT JS are a way of creating and deploying API endpoints without the need of API endpoint.

• Prevents managing server infrastructure

• Without worrying about scaling the server as traffic increases

Implementation

For each route API endpoint defined in route.js file.

Benefit #4: Express backend vs NEXT full stack

• Removes 20k+ lines of code

• 30+ dependencies

• Improving Hot Module Reloading(HMR) from 1.3s to 131ms

Benefit #5: Automatic Code Splitting

• Technique, that breaks down large bundles of JavaScript code into smaller more manageable chunks that can be loaded as needed that's the key word here when needed this reduces the initial load time of a website and optimizes the user's experience while browsing while

• In react, this is a manual process.

• split pages into separate chunks when a user navigates to another page only the code required for that page is loaded resulting in Faster subsequent page navigations

Developer Experience

front-end development has gone through various advancements in areas like:

• linting

• formatting

• compiling

• bundling

• minifying

• deploying

• and many more

however to avoid the time spent configuring these tools developers felt a need for a framework that would take care of most of the process automatically leaving them to concentrate on the actual code

Benefit #6: Built on top of react

• Not entirely new technology, is an extension of react that streamlines the development process by automating several functions allowing developers to focus on what they do best writing react code

• It reduces the amount of time effort required to build a react application from the ground up

History

In NEXT JS 12,

• App directory was called page directory

SUMMARY

• REACT JS: For client side

• FULL STACK = NEXT JS: For server side + REACT For client side

  • alternative to MERN

REFERENCE