How to create a next.js app without using command create-next-app

Creating a Next.js app without using create-next-app involves some manual setup. Here’s a simplified guide to help you get started:

Step 1: Set Up Your Project

  1. Create Project Folder: Start by creating a new folder for your Next.js project.bashCopy code
mkdir my-nextjs-app cd my-nextjs-app
  1. Initialize Package.json: Run the following command to initialize a package.json file.bashCopy code
npm init -y

Step 2: Install Dependencies

  1. Next.js and React: Install Next.js and React using npm.bashCopy code
npm install next react react-dom

Step 3: Create Project Files

  1. Create Pages Folder: Inside your project folder, create a pages folder. This is where Next.js expects to find your page components.bashCopy code
mkdir pages
  1. Create Index Page: Inside the pages folder, create an index.js file. This will be your main entry point.jsxCopy code// pages/index.js
// pages/index.js
import React from 'react';

const Home = () => {
  return <div>Welcome to Next.js!</div>;
};

export default Home;

Step 4: Configure Package.json

Add the following scripts to your package.json file to enable running and building the Next.js app.

jsonCopy code

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Step 5: Run Your Next.js App

  1. Run in Development Mode: Run the following command to start your Next.js app in development mode.bashCopy codenpm run dev Your Next.js app should now be running at http://localhost:3000.
  2. Build Your Project: If you want to build your project for production, run:bashCopy codenpm run build
  3. Run in Production Mode: After building, you can start your Next.js app in production mode.bashCopy codenpm start

That’s it! You’ve set up a basic Next.js app manually without using create-next-app. You can now continue building your application by adding more pages and components as needed.