Getting Started with NextJS13
Tags: nextjs13, nextjs, nextconf, typescript
Published: 2022-11-03 11:24:31

---
title: Getting Started with NextJS13
published: true
description: Getting started with NextJS13
tags: NextJS13,NextJS,NextConf,TypeScript
# cover_image: https://miro.medium.com/max/1100/1*KDMx1YspSrBcFJG-NDZgDg.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-03 11:11 +0000
---

In the last week, [Varcel](https://vercel.com/) made a lot of announcements at their [NextJS conference](https://nextjs.org/conf) ([NextConf](https://nextjs.org/conf)), 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](https://nextjs.org/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](https://beta.nextjs.org/docs/getting-started) 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](https://medium.com/@TheAkshayKhale/a-quick-look-at-nextjs13-whats-changed-what-s-new-and-what-s-improved-46ce9ab77598), I published on [medium](https://medium.com/@TheAkshayKhale) (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!!!