How to create a new Next JS 13+ app?

Next JS serves as a React framework designed for the development of full-stack web applications. It facilitates the management of both the client-side (frontend) and server-side (backend) aspects within a unified codebase. Next JS streamlines and automates the setup of essential React tooling, handling tasks such as building, compiling, and more. This enables developers to concentrate on crafting their applications without the need to invest significant time in intricate configuration processes.

Steps to Create a New Next JS 13+ Project

Step 1: Create a new Next application using the command given below:

npx create-next-app gfg-next-app

On pressing Enter, the below prompt will appear to configure your next app.

configuration needed for next.js 13

Project Structure:

Project Structure of Next.js

The updated dependencies in package.json file will look like:

"dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
}

Example: Clear the given Code snippet and write the below code.

Javascript

export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js</h1>
    </main>
  )
}

Step 4: Open the Terminal in the Project file location and type.

npm run dev

Output: Open the browser and type : localhost:3000.

localhost:3000 home screen