Three things I loved most about Next.js 13.4 so far

Next.js was first launched in October 2016 by Vercel (formerly Zeit), years earlier than I started programming. However, I only started to learn it about a month ago when I needed to develop an application as part of a technical challenge using this famous “React framework”.
Its latest version, Next.js 13.4, brought a lot of upgrades and changes on top of what already exists.
I don’t intend to go deep on those changes here - you can easily find plenty of good articles already discussing features, but I wanted to highlight what was my “love at first sight” from a newbie perspective and with no preference order.

Learning curve 📚

As an immigrant woman who changed careers and moved to the software development field after my 40s with no tech background, learning technology is still very challenging, especially if it is something that I see for the first time. Even though my love for programming and learning new things makes the process pleasant and lighter, it does not make things easier.
However, I was surprised by how much easier it was to understand Next.js' logic and structure built on top of React, giving you extra features that I found very handy. The documentation is also easier to follow and understand.

New Project 💻

Next 13.4 offers you TypeScript and TailwindCSS by default, which is fantastic. I’d decided to use TypeScript to build a side project, but you can use js or jsx. It is up to you.
I learned software development by doing a bootcamp that used JavaScript as a core programming language. Even though I used TS for a few months in a startup I worked with previously, it is still very challenging for me, and I love it.
To start to play around with the latest version of Next.js, run the following command to create a new project (you will also need to have Node.js 16.8 or later):

npx create-next-app@latest

You will be asked these prompts before putting your hands on the code.

What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes

Structure

Once the project is ready and you open it on your IDE (I use Visual Studio Code), you will have a structure like that:

To see it in your localhost:3000, start up the dev server by running the following:

npm run dev

Love number 1: Routing ❤️

As per Next.js documentation.

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more. The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption.

What does it mean?
Creating a route in Next.js 13 is ridiculously simple.
Inside the app directory/folder, you have a page file (in my case, page.tsx), which is your app homepage. Inside that main app directory, create a folder with the name of the route you want, and inside that route/folder, create a file called page.tsx.

Here, I created a route to an About page by creating a directory called about and a page.tsx inside it. At the page.tsx file, I included an arrow function component that returns a title and content.
If you repeat these steps and go to localhost:3000/about, you will see the text content from the AboutPage component, as I did. And that is all you need to do. Easier like that!

Note that folders are used to define routes, and files are used to create the UI for that route. The folder's name is the route, and its file is called page.tsx.

Nested routes

To create nested routes, you need to repeat the same steps, but this time in the route folder. In my example, I implemented a route for /about/team by creating a folder called team inside the about folder. In the team folder, I created a new page.tsx file displaying a title and content. Once saved, the content of TeamPage was rendered on localhost:3000/about/team.

Of course, my project side is minimal and straightforward. Big and complex projects will demand a planned folder distribution and structure, but from my learning curve perspective, creating a route in Next.js was very easy to understand and execute.

Love number 2: Layout ❤️

Another great feature of Next.13 that I loved is the layout.
As per Next.js,

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

When you create your new Next.js project, the layout file is also included next to the main page.tsx. It is a simple React component where you will put a header, footer, and anything you want on every page.

As you can see in the image above, this is also where you will include your metadata, such as title, description, keywords and so on.

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

You can also easily include fonts from Google. The layout provided in your initial project includes an example of importing Google fonts straightforwardly.
You just need to import the font you want and store it in a variable like that:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

You can also add other attributes you need for your project. Here is another example:

import { Poppins } from 'next/font/google';

const poppins = Poppins({
  weight: ['400', '600'],
  subsets: ['latin'],
});

To apply the font to your project, you just need to add the className to whatever tag you want to use it on. The Next.js boilerplate applies the className on the body of the project:

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )

Nested layouts

As per Next.js documents, Layouts can also be nested.
You can customise a layout for a specific page by adding a new layout file in the folder you want it.

Here is how Next.js docs illustrate an example:

Let’s go back to the About page I mentioned previously. I can create a different layout for that page by creating an about/layout.tsx file next to my about/page.tsx. In this file, I defined a React component:

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <div>{children}</div>
    </>
  );
}

Your creativity (or the project requirements) is the limit. You can include a new font or metadata in your custom layout, or you may want a different container, a sidebar, or whatever layout you need in your project.

My thought about this feature is: I was guided by a fantastic senior to keep my CSS files at the same level as their respective files, as having everything in the main styles folder would get very messy very quickly and make it harder to coordinate changes from a maintenance perspective in future. Next.js applying the same concept with the nested layout file made lots of sense.
You can read more about pages and routing on this page of Next.js docs.

Love number 3: Server Components ❤️

This feature took me the most time and effort to understand, but once I got the idea, it looked fascinating and full of opportunities for experiments and learning!

As per Next.js docs, let’s quickly highlight two crucial definitions of this feature.

The client refers to the browser on a user's device that sends a request to a server for your application code. It then turns the response from the server into an interface the user can interact with.

The server refers to the computer in a data center that stores your application code, receives requests from a client, does some computation, and sends back an appropriate response.

NextJS 13 includes a Server Components feature by default, and as per its documents:

“allowing you to render components on the server easily and reducing the amount of JavaScript sent to the client.”

What does it mean?
Servers can process JavaScript and create documents faster than a client.
For Server Side Rendering, your service response to the browser is the HTML of your page that is ready to be rendered. It will start rendering the HTML from your server without waiting for all the JavaScript to be downloaded and executed, the opposite of what happens on the Client Side Rendering.

I followed Next.js recommendations for fetching data in Server Components.
I tried simple data fetching, and I found it easier and straightforward to do.

✔️ Here is what I did:

• I created a Server Component called Repos to render my repositories on GitHub.
• Created an async function called getRepos() and used the Next.js fetch() API - you can learn more about it on the Next.js docs - to get the data I wanted from GitHub API and fetch it straight away in the component.
• I called the getRepos() and returned the details I needed to display, such as the name and description of my GitHub repositories.

Last thoughts 📌

I just started diving deep into this exciting framework, and I loved the experience of playing around with Next.js.
It has downsides, and there is a lot to explore and learn from.

• Server Components are less interactive than Client Components.
• They can’t be a component state, and you can’t use the useState hook.
• It also doesn’t support lifecycle methods, and you can’t use the useEffect hook, which is handy for a component where you need to keep re-rendering, e.g., a search component.
• If you want to use the useState hook and make it interactive, you need to make it a Client Component by adding ‘use client’ to the top of the component, but I’m going to let this step for another day.

Still, many developers in the community are already excited about this new features once you can combine some of the interactive experiences of client-side apps with the improved performance of traditional server-rendered applications.
Server Components improve the initial page loading time, simplify data fetching and improve access to databases and file systems.

As I said, these thoughts are from my perspective and take into counting my constantly struggling learning process.
If you already know, Next.js, I would love to hear your insights about the new features and what I can experiment with. If you are new to that, like me, I hope I got to make you curious to try and share your thoughts. 🚀