First Experience With Next.js - part 2

I started looking at Next.js and described my first look at the documentation below.

First Experience With Next.js - part 1

Lorenzo Zarantonello for This is Learning ・ Feb 27 '23

#react #nextjs #javascript

The section called From React to Next.js was a nice and quick session that shows how you could migrate from a very simple React Application to a Next.js application.

The next session is How Next.js Works. Then I created my first Next.js app.

How Next.js Works

While a bit theoretical, I found it interesting.
You get to understand the difference between development and production environments. Next.js comes with a compiler written in Rust that optimizes for different environments.

You will get familiar with the concepts of:

• compilation: "transform" code into JavaScript so browsers can understand them.
• minification: deletion of unnecessary code formatting and comments to reduce app size
• bundling: packing all files, functions, modules into optimized bundles for the browser
• code splitting: split code into its own optimized JavaScript bundle
• Build Time vs. Runtime
• Client and Server: Client is the browser on a user’s device. Server is the computer in a data centre that stores your app
• Rendering: transform React code into the UI. However, I would suggest you read the page if you want to know more about the differences between Client-Side Rendering, Pre-Rendering, Server-Side Rendering, and Static Site Generation.
• CDNs and the Edge. Content Delivery Networks (CDNs) store static content (such as HTML and image files) in multiple locations near your customers. Edge servers can run small snippets of code and increase the responsiveness of your app (together with CDNs)

Create a Next.js App

As declared in the tutorial, you should have basic knowledge of JavaScript and React before jumpring into Next.js.

Make sure you have:

• Node installed
• Possibly Git if you are using Windows. Mac and Linux should have it by default

Since they suggest to run

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

I simply follow. Here is the result.

You can then move into the newly created folder with

cd nextjs-blog

adn run the app with

npm run dev

Then, open http://localhost:3000/ from your browser and you will see your first Next.js app. This was incredibly fast :)