How to create NextJS App and run locally!

To build a Next.js website, you need to follow a few prerequisites and installation steps. Here's a guide to get you started and run it locally.

 Prerequisites:

Node.js:

• Next.js is built on top of Node.js, so you need to have it installed.
• You can download and install the latest version of Node.js from here. It's recommended to install the LTS version.

 

npm or yarn:

• npm comes with Node.js, so once you install Node.js, npm is already installed.
• Alternatively, you can use Yarn as the package manager. You can install Yarn by running:
  

  Text Editor/IDE:

• You’ll need a code editor to work on your project, such as Visual Studio Code or any other text editor.

Installation Process for Next.js Project:

1. Create a New Next.js App:

To start a new Next.js project, you can use Create Next App, which is a starter template.

1. Open your terminal/command prompt.

2. Run the following command to create a new Next.js app:

   

3. This will automatically create a new directory called my-site and set up a basic Next.js project.

4. If you prefer using Yarn, you can run: 

    

   Navigate to Your Project Directory:

   After the setup process is complete, navigate into your newly created project directory:

   

   Install Dependencies:

   If dependencies haven't been installed automatically during project creation, run the following command to install them:

    

   Or, if you're using Yarn:

    

   Running the Project Locally:

   To start the Next.js development server locally:

   Run the following command:

    

   This will start the development server at http://localhost:3000. You can open this URL in your browser to view your Next.js app running locally.

   Next Steps:

   Editing the Site:

   Open the project in your code editor and start editing the files in the pages directory to customize your site.

   The default pages/index.js file is the homepage of your app. When you edit this file, your browser will automatically reload to reflect the changes.

Additional Commands:

Build the app for production:

 

That's it! You now have a Next.js website running locally on your machine. Feel free to explore more features of Next.js as you develop your website. 

Check what is class in JavaScript HERE

Check out functions JavaScript HERE