Creating a new Next.js 13+ application is a straightforward process that sets up a modern React-based framework with built-in features like server-side rendering, static site generation, and API routes. 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: Check the version of node.js and install the latest version of node

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

npx create-next-app@latest gfg-next-app

use @latest for the latest version of next.js or yow can mention the version as given below

npx create-next-app@14 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.

// Filename - app/page.js

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

Conclusion

Creating a new Next.js 13+ app involves a few simple commands to set up a project and start development. With the powerful features of Next.js, you can build high-performance web applications efficiently.