Next.js Tutorial - 1

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

The error you're encountering, "Missing script: 'dev'," occurs because your package.json file does not have a script for running the development server (dev). In Next.js projects, the dev script is typically used to start the development server.

You can resolve this by adding a proper dev script to your package.json file. Here’s how to fix it:

1. Open your package.json file and add the following under the scripts section:

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "next": "^14.2.15",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "scripts": {
    "dev": "next dev",         // Add this line
    "build": "next build",     // For production build
    "start": "next start"      // For starting the app in production mode
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

2. Now, run the npm run dev command again:

npm run dev

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

1. Create a pages directory or an app directory:

• If you're using the Pages Router (traditional routing system):

  • Create a pages directory at the root of your project.

• If you're using the App Router (available in newer versions of Next.js):

  • Create an app directory at the root of your project.

2. Inside the directory, create an index.js (or index.tsx for TypeScript) file to serve as your home page.

mkdir pages

touch pages/index.js

Inside pages/index.js, add the following:

export default function Home() {

  return <h1>Hello, Next.js!</h1>;

}

OR - For the App Router:

mkdir app

touch app/page.js

Inside app/page.js, add the following:

export default function Home() {

  return <h1>Hello, Next.js (App Router)!</h1>;

}

npm run dev

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||