Creating App with Next.JS 13.

Next.Js 13 app with app directory.

In previous post, we have got Intro to Next.js 13. In this post we will create an app with next.js 13. So, let's get started.

We can create Next.Js 13 app in 3 ways.

1. Automatic Installation.
2. Manually Installation.
3. Integrating in exiting project.

Automatic Installation

For automatically creating Next.js 13 App with app directory run the following command in terminal:

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

This best and simplest method.

create-next-app now ships with TypeScript by default. See TypeScript for more information.

Manual Installation

1. With create-next-app

Step 1. In terminal run following command:

npx create-next-app@latest

Step 2. Now, in next.config.js enable experimental dir as following:

Step 3. Next, Create an app folder and page.js inside it.

and delete index.js from page directory.

When you will run yarn dev Next will automatically create layout.js and head.js files in app directory.

2. Without create-next-app

Step 1. Install the following packages

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

Step 2. Open package.json and paste the following scripts:

These scripts refer to the different stages of developing an application:

• dev: runs next dev to start Next.js in development mode.
• build: runs next build to build the application for production usage.
• start: runs next start to start a Next.js production server.
• lint: runs next lint to set up Next.js' built-in ESLint configuration.

Step 3. Next, Create a next.config.js file in the root directory of your project and add the following code:

Step 4. Create an app folder and add a layout.js, page.js, and head.js files. These will be rendered when the user visits the root of your application.

Step 5. Create a head file app/head.js with a title and meta viewport tags to the file:

Step 6. Finally, create a home page app/page.js with some initial content:

NOTE:

If you forget to create a head.js or layout.js, Next.js will automatically create these for you when running the development server.

To run you project.

Run

yarn dev

or

npm run dev

You are good to go.

Thank You For Reading. If you like don’t forget to follow and clap.

I am waiting for you in next Article.

See you soon :)