Creating a First NextJS App

Creating a First NextJS App, follow these steps:

Prerequisites for Creating a First NextJS App

1. Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
2. npm or yarn: Node.js comes with npm (Node Package Manager). Alternatively, you can use yarn.

Steps to Install and Create a Next.js Project

1. Open your terminal: You can use any terminal or command prompt you prefer.
2. Create a new Next.js project: Use npx (which comes with npm 5.2+ and higher) to create a new Next.js application. You can also use yarn if you prefer.

• • Just make sure that before running belove command.
  • You navigate into a folder.
  • Where you wanna create your new Next project.
  • and you’ll then be asked a couple of questions.
  • like for example, what the name of this project should be.
  • and here I’ll simply pick my-nextjs-app.

Using npx:

Replace my-nextjs-app with your desired project name.

Check Belove Screenshot you will get some idea.

3. Navigate to your project directory:

4. Start the development server:

After “run npm dev” you will get local url, look like belove screenshot.

 

 

 

    5. Open your browser: Navigate to http://localhost:3000 to see your new Next.js app running and look like belove screenshot.

 

Example of a Next.js Project Structure

After running the commands above, your project directory should look something like this:

my-nextjs-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── package.json
├── README.md
├── next.config.js
└── pages/
    ├── _app.js
    ├── index.js
    ├── api/
    │   └── hello.js

Key Files and Directories

• pages/: Contains the components that correspond to different routes in your application.
  • index.js: The main entry point of your application (usually the home page).
  • _app.js: Customizes the default App component used by Next.js.
  • api/: Directory for creating API routes.
• public/: Static files such as images and icons.
• styles/: CSS files for styling your application.
• next.config.js: Configuration file for customizing your Next.js setup.

Customizing Your Next.js App

You can now start building your Next.js application by adding pages, components, and styling. The pages directory is where you’ll create your different routes, and you can organize your components and styles in any structure that fits your needs.

If you want to learn basic Linux command line click here.