AUTOPLAY

Track Progress 👉🏻

Questions / Comments ==>

Professional NextJS Lessons

3.Project Template

4.Introducing FullStack React

5.App Router Reference

6.NextJS Server vs. "use client" Rendering

7.Nesting Server and Client Components

8.Client Only Components

9.Global CSS in NextJS

10.CSS Modules and SASS

11.Tailwind CSS

🚨 Work In Progress 🚧

Subscribe for Launch

Introducing FullStack React

NextJS is Extremely Popular

For example checkout its npm package downloads and GitHub Stars

Let's discuss some of its benefits.

Server Side Rendering (CSR vs SSR)

A standard React Application renders its content on the client side only. This is known as client-side-rendering or CSR.

An example application from the Professional ReactJS course is shown below.

App.tsx

export default function App() {
  return (
    <>
      Hello Fam!
    </>
  );
}

The same code in a NextJS page will actually render fully on the server. This is knows as server-side-rendering or SSR.

An example application based on our NextJS template is shows below.

app/page.tsx

export default function Home() {
  return (
    <>
      Hello Fam!
    </>
  );
}

Building APIs

Quite commonly as a part of web development you need to build APIs. These can be for other teams in the organization, or for the user interface (BFF - Backend For Frontend pattern) or even external services as webhooks.

NextJS makes it extremely convenient to build these thanks to its route handlers.

app/route.ts

import { NextResponse } from 'next/server';

export function GET() {
  return NextResponse.json({ message: "Simple API" });
}

React Server Components

NextJS even allows you to use server side code in NextJS without exposing it to the public internet. One simple ways is to use React Server Components or RSC.

An example is demonstrated below where we read the contents of the repository/repo README.md file using a server-only utility function.

app/page.tsx

import fs from "fs";
import path from "path";

/** Normally in order to use this in the frontend you would need to expose it as an API */
async function readme() {
  const contents = await fs.readFileSync(
    path.join(process.cwd(), "/README.md")
  );
  return contents.toString("utf-8");
}

/** 
 * React Server Components or RSCs
 * allow you to use server functions in a server component with async/await
 */
export default async function Fancy() {
  const contents = await readme();
  return <>{contents}</>;
}

Enjoy free content straight from your inbox 💌

Transcript

00:00

Before we start digging deeper into various next year's APIs, let's take a moment to understand why next year's and appreciate its core value offerings. First off, next years is insanely popular, almost as popular as React itself. This matters for a lot of reasons. As an example, help will be available when you run into issues and more people using Next JS means there will be more job opportunities. Here are some statistics to truly grasp how popular next JS is. The next package by itself is downloaded over 7 million times every week.

00:32

Next JS itself is open source on GitHub and it has over 125,000 stars. And the key reason for using Next J over other competing frameworks is that it is supported by a successful company. Even the React core team is actively involved on working on next J with vercel to ensure that it is a great framework for using React. Next J calls itself a React framework. So let's talk about what is next JS add on top of React, and the big thing here is server-side rendering. Here we have a simple React application from

01:06

our React J course. We are simply rendering out the text Hello Fem. And if you look at this application in the browser, of course it does look correct. However, if you look at the initial HTML response that is coming from the server, you will not find the text Hello fam within the response. This is because Core React by itself is actually a client site framework. So our server in this particular case is a simple HTTP server and it serves indexer HTML along with the generated JavaScript, and then it's up to the client to fetch that JavaScript code

01:40

and then execute it within the browser. And then that JavaScript is what will finally render the React application. Now let's paste the same component code into a next JS page. Now when we execute the application, the final result within the browser is of course, exactly the same. However, when we look at the rendered response from the server, we can actually see the text Hello fam present within the initial HTMO. This is because a next case by default does server side rendering for React. So the server side backend in this particular case returns to JavaScript as well as the rendered HTMO.

02:15

This means that on the client side, we get the initial HTMO response that contains the final text that the user is going to see. And this is great for a number of reasons. First, it is great for user experience because the user gets immediate feedback, and additionally, it's great for search engine optimization because the search engines can see and index our content without having to execute JavaScript. Now of course, we want a replication to be interactive on the client, so the JavaScript does eventually load and then it binds through the existing HTML in a process known as hydration. And all of this work is taken care of by next years.

02:52

Now, next years isn't magic. You could build something like this yourself on top of React, but it is extremely convenient Not having to do this yourself. In addition to building user interfaces, next JS also offers a neat solution for building APIs. As an example, we can create a simple folder within an app called API, and in that we create a file called Route T. We bring in a next response from the next server package, and then we export a simple get function, which returns a next response of type json, where the payload is a simple message

03:27

containing a simple string. And now in addition to returning user interfaces, we now have a new endpoint under slash API, which returns NAPI responses. Now, as you would expect, there is a lot more to creating APIs with next JS, and we will cover that later on in this course. Modern Next JS goes beyond standard HTP routes in terms of convenience. You can even call server side functions at directly from your user interface without having to build a public H-T-T-P-A-P-I. To demonstrate this, let's create a new page under a new

04:00

folder called Fancy. We bring in some modules that you only use on a server, for example, the file system as well as the path from no js. And then we create this utility function called Read Me, which will actually read the contents of the Read Me MD file for this particular repository. Now, normally if you want to use this function within the user interface, we would actually need to create an API, but there are a number of ways we can do this within the next yes, without actually doing that. One example is by using React Server components, which can make Async Await server-side calls

04:33

as a part of their rendering. And with this new page created, if you visit slash Fancy, we get a UI that is actually displaying us the contents of the Read Me file within our repo. In summary, next JS is an all in one solution for creating full stack web applications, and I'm thrilled for you to discover its many tips and tricks. Thank you for joining me, and I will see you in the next one.

Professional NextJS

Professional NextJS

3.Project Template

4.Introducing FullStack React

5.App Router Reference

6.NextJS Server vs. "use client" Rendering

7.Nesting Server and Client Components

8.Client Only Components

9.Global CSS in NextJS

10.CSS Modules and SASS

11.Tailwind CSS

🚨 Work In Progress 🚧

Subscribe for Launch