A Dev Blog

First Experience With Next.js

First Experience With Next.js

Lorenzo Zarantonello's photo
Lorenzo Zarantonello
·

2 min read

I am trying out Next.js with React and here is my experience.

Introduction

Let's start by saying that I didn't know anything about Next.js.

The documentation is very nice and it starts with a good introduction that explains well where Next.js is positioned.

Next.js is a React framework that gives you building blocks to create web applications.

These building blocks include stuff like data fetching and routing that you would need to otherwise import in React.

The FOUNDATIONS part of the documentation is a pleasant read that walks you through some basic but important concepts of web development.

From JavaScript to React

Here is a quick summary of what you can get in the section From JavaScript to React

Fundamentals of web development

  • What is the DOM? An object representation of the HTML elements.

  • Imperative vs Declarative Programming - Step-by-step instructions on how to make a pizza vs just ordering a pizza.

  • What is JSX? A syntax extension for JavaScript.

  • What's Babel? An interpreter to compile JSX into JavaScript so browsers can understand the code.

Fundamentals of JavaScript

Fundamentals of React

- React Core Concepts 1: Components. Components are small building blocks of code. In React, components are functions that return UI elements. Use React components in JSX by writing the capitalized component name inside tags. You can nest components into each other.

- React Core Concepts 2: Props. Props (e.g. properties) allow you to pass pieces of information as properties to React components. Think of props as passing a string to the src attribute of an img element in HTML.

- React Core Concepts 3: State. State is "any information in your UI that changes over time". React uses functions called hooks to manipulate the state and make some other operations.

More info on learning React.

List of resources to learn React:

https://dev.to/lorenzojkrl/best-free-react-resources-49nk

https://dev.to/lorenzojkrl/best-free-react-resources-49nk

In the next few days, I will go through From React to Next.js, but for the moment, this is it!

My Two Cents

  • Best documentation I have seen so far, have a look!

  • I loved the quick quizzes in the documentation

  • While the introduction is great, it doesn't substitute learning JavaScript and React (which are warmly suggested).

Next.js