Alexandru Ene

Posted on Oct 10

Next.js - My First Impressions

#webdev #beginners #nextjs

Intro

Hey, guys! Recently I've started getting familiar with Next.js. You know, I've been always so curious about learning new stuff and not just for hype or to show off because you can make an infinite carousel with your stack, but for its utility. So I wanted to share my first impressions.

What Is Next.js?

In a nutshell, it is a framework built on top of React created by Vercel, for building full-stack web applications. It takes what React can do and adds a few more features like:

Optimizations for images, fonts and scripts
Routes using the file system
CSS support, like CSS modules, Tailwind
Server side rendering (SSR)
Built-in API Routes
and more...

So far so great, I'd say!

Create Your First Next.js app

I noticed getting started is very straightforward. You just open a terminal and you go like this:

npx create-next-app@latest

So, next you will meet a few prompts like:

PS C:\Users\Alexandru\Desktop\next> npx create-next-app@latest
√ What is your project named? ... .
√ Would you like to use TypeScript? ... No / Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack? (recommended) ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:\Users\Alexandru\Desktop\next.

And that's it. You just created a fullstack app from scratch! Well, not quite, but you are closer now!

What I Noticed

1. Built-ins
After creating the Next app, there are a lots of built-ins. Tailwind and Typescript are already configured. It also initializes a git repository and creates a .gitignore file with some stuff that you shouldn't push to git, like node_modules, .env, build.

2. Basic app structure
The folder structure is simple. It mainly looks like this:

my-next-app
  /node_modules
  /public                // some svgs here
  /src/app               // the App Router
    globals.css 
    layout.tsx           // the root layout, required
    page.tsx             // your homepage at /
  .gitignore
  next.config.ts         // app configuration
  package.json           // scripts, dependencies
  tsconfig.json          // typescript configurations

3. The Routing System
With Next.js, forget about forgeting to install the react-router-dom dependency and then ask yourself why does the console spits errors at you and your app dies. Forget about your old React Router...

There are actually two ways of doing it.

1. Inside /src/app folder, you can choose for having a /pages folder and there you setup your routes as files. Every file name should match the route path you need.

For example, if you need a route to /about, you go to /src/app/pages and there you create a file called about.tsx, if you use Typescript. And this file is your basic day-to-day React component.

2. The second choice you have is actually the new way of doing things. Inside /src/app folder you create a folder that should match your route path and inside it you create a file called page.tsx.

For example, if you need a route to /contact, you go to /src/app/, create a folder called 'contact' and then inside id create a file called 'page.tsx'.

4. The Components
It is just like having components in React. So cool! But these components are somehow special. Every time you create a component in Next.js, again, just like in React, this component is at the same time a client component and a server component, so to speak...

Whenever you check these points:

State and event handlers: onClick, onChange
Lifecycle logic: useEffect
Browser-only APIs: localStorage, window
Custom hooks you need a client component. And you have to use it like this:

'use client'

import { useState } from 'react'

export default function Button() {
  const [ state, setState ] = useState(...);
}

If you need a server component and you check these boxes:

Fetch data from databases or APIs
Use API keys, tokens, and other secrets
Reduce the amount of JavaScript sent to the browser just do nothing, your simple React component in Next.js is already a server component by default.

5. Use Effect Hook
Something interesting, when using server components and need to fetch data, you don't need useEffect anymore, without which you would cause an infinite render in React.

export default async function Page() {
  const res = await fetch(url)
  ...
}

How to Approach Learning

Recently I have tried a different approach when it comes to learning. I am giving myself a project, a big one, a great challenge. And then I am thinking about improvements I want to make or new tools or languages I would like to learn and so on. I make a quick intro, like a very small crash course for that language, tool etc, like the foundation, to get the bigger picture. Then I start working on that specific project, learning and applying what I need on that project immediately.

Something like, you want to create a blog and at the same time you want to learn Next.js or other framework. You get a short intro. And now you need to create the app. So you go documenting, googling, tutorials and then do it yourself. And then you need the navigation, which needs routing. You go learn how to do that and apply it on your blog immediately.

This is learning by building. And I noticed it sticks better. I will bring some updates on how it goes in the future.

And another tip to learn better would be to read the documentation, which is sometimes boring, I know. But it does the job.

If you want to know more, the documentation for Next.js is right HERE.

In Conclusion...

I was very excited with learning something new like Next.js. It seemed like an easy-going friend, chill and nice.

After putting lots of hours in my last project, I kinda got bored, you know. Like I needed a refreshment. I wanted to know I am not stuck. When learning new stuff, it gives you this pleasant feeling that you are moving on to the next level, that you are making progress.

Of course, this is just the beginning. There is a lot more to learn. But I am happy I did it.

Let's talk

Feel free to share your experiences in the comments. And, people that used Next.js for longer, what would be your advice?

As for me, thank you for reading and see you in the Next.js one! :)

Top comments (14)

Andrew Bone • Oct 10

If you want a next like experience and are familiar with TypeScript can I suggest having a play with Fresh. It uses Preact under the hood, Vite (as of the last update) and Deno (so TypeScript) but it all still feels very familiar.

Alexandru Ene • Oct 11

Thank you! I will look into it!

Jarne • Oct 10

At this point, I write all my Websites with nextjs. It makes everything so easy. I'm used to react, and nextjs gives it so much more possibilities. If it's just a static site, nextjs allows SEO. If it's a complete webapp, nextjs provides the necessary backend functionality. And besides that, it's super easy to host.

Alexandru Ene • Oct 11

Cool! It kinda fees like React on steroids, right?

Jarne • Oct 11

It sure does. It makes react look incomplete at least

Alexandru Ene • Oct 11

Yes, I noticed that too. It is so easy to work with, that you feel you could build your app blindfolded. And I just started learning a few days ago.

Yahaya Oyinkansola • Oct 10

Next makes building React apps more enjoyable, especially because of feature like image optimization and pre rendering of pages. I always like building front end websites and apps with it

Dimitar Bogdanov • Oct 13

Routing being baked in is also probably the best thing ever. It's just there, the moment you need it, and requires practically no configuration for simple usecases. It's beautiful :D