Getting Started with NextJS13

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.

So let's get started with NextJS13

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 instead of pages then you will have to make the following changes to your next.config.js file.

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

module.exports = nextConfig;

After following all these steps you will have a NextJS 13 project up and running.

This article is a snippet from this article, I published on medium (don't worry it's not a members only article) where I shared about how to get started with NextJS13 and what are the changes and new improvements to NextJS13.

Thank you!!!