Next JS

In the last week, Varcel made a lot of announcements at their NextJS conference (NextConf), it was a fascinating event with some significant announcements and keynotes by our favorite Dev-YouTubers (or should I say Dev-tubers). Most of the announced products are still in the Beta and Alpha stages but that does not stop us from giving them a try.

Here are some significant announcements made during the conference:

The NextJS-13
Turbopack
Improvements to the @next/image
Improvements to the @next/link
and updated and faster Next Router.

Out of these new features/products, NextJS-13 got me excited since I am already using NextJS for some of my projects and I love their philosophy and their focus on the developer experience (DX) while designing the framework. So when I heard about NextJS13, I was super excited and wanted to give it a try.

After digging the internet on how to start with NextJS-13, I could not find solid documentation for the same. Next/docs do not contain documentation for Next-13 since it’s not stable yet but after googling and watching some youtube videos, I could find the link for their Beta documentation that has complete details of the NextJS-13, as to how to get started, what’s new and what’s same and in this article, I am going to share a brief of those updates.

How to get started?

If you are starting with a new project then you can simply run:

// With npx
npx create-next-app@latest --experimental-app

// With yarn
yarn create next-app --experimental-app

// With pnpm
pnpm create next-app --experimental-app

If you want to continue with the existing project then you can simply run:

// With npm  
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

// With yarn
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

Note: If you are making changes to the existing project then it will work with the pages directory and not the experimental app directory, if you want to use the app directory then you will have to make the following changes to your next.config.js file.

const nextConfig = {  
  experimental: {  
    appDir: true,  
  },  
};  

module.exports = nextConfig;

after these changes, you can simply rename the pagesdirectory to app and everything should work just fine (fingers crossed).

What’s Changed?

TypeScript by Default:

The new NextJS project will start with TypeScript by default, which you can change by simply renaming the files from .ts to .js and .tsx to .jsx and removing the type annotations.

Server Components by Default:

All components inside the app directory are server components by default and if you want to make any component a client component then you can add use client; statement at the beginning of the component file before imports statements.

Advantages of Server Components:

All the functions are executed on the server so no need to use getServerSideProps and then drill the data as props to the components.
Less JavaScript on the client.
Faster initial page loads.

What’s New?

The app directory:

All the NextJS projects used to ship with the pages directory where you can define page components with the name index.tsx/index.jsxthat work as routes but in the NextJS13 that's updated, now it ships with an app directory where you can define routes but the route name should be page.tsx/page.jsx instead of index.tsx/index.jsxand there are some additional conventions to adding the pages.

Every page should be named page.tsx/page.jsx . You can use [variable].tsx/.jsx for dynamic routes, no changes there.
Every page/folder can have layout.tsx file to define the page structure and common components.

Image the following folder structure of a NextJS13 project:

NextJS-13 sample project

Considering the above project, if you visit http://localhost:3000/about, it will first load the app/layout.tsx then about/layout.tsx and then about/page.tsx . This will allow you to build a common root layout that can be shared between and loaded on all the child components/pages.

Every page can have a loading.tsx/loading.jsx file that will be shown to the user while the page is loading.
Just like loading and layout, you can have error.tsx/error.jsx file that will be loaded when there is an error.
head.tsx/head.jsx file for creating <head> tags in the child pages.
not-found.tsx/not-found.jsx file which is loaded when we make notFound() function call in the page component.

What’s improved?

Hooks only for the client components:

useRouter hook for programmatic redirects.
useSearchParams hook for reading URL Search Parameters.
useSelectedLayoutSegment hook for getting the current route segment.
useSelectedLayoutSegments hook for getting all the child pages in the current layout segment.
usePathname hook to read the current path name.

Special functions for the Server components:

cookies: Function to read cookies on the server side.
fetch : Function to make requests on the server, it’s an extension of web fetch API.
headers : Function to read HTTP headers on the server.
notFound : Function to dynamically return 404 from the server.
redirect : Function to redirect from the server.

These were the changes I found significant to share and please feel free to comment if I’ve missed any of the major features that are part of the NextJS13 release.

You may follow me on Twitter, LinkedIn, or right here on Medium where I am active and share similar content.

A quick look at NextJS13. What’s changed, what’s new, and what’s improved…