DEV Community

Cover image for First Experience With Next.js - part 2
Lorenzo Zarantonello for This is Learning

Posted on

First Experience With Next.js - part 2

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

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:

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"
Enter fullscreen mode Exit fullscreen mode

I simply follow. Here is the result.

Next.js installation completed

You can then move into the newly created folder with

cd nextjs-blog
Enter fullscreen mode Exit fullscreen mode

adn run the app with

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Next.js app

Top comments (0)