Setup Next.js and Create a Project in MacOs

What is next.js? A popular open-source React framework created by Vercel, formerly known as ZEIT. It’s designed to make building React applications easier and more efficient, especially for server-side rendering (SSR) and static site generation (SSG). Other than that next.js is popular for,

1. Server-side rendering (SSR): Next.js enables SSR by default, allowing React components to be rendered on the server before being sent to the client. This improves performance and SEO.
2. Static site generation (SSG): Next.js can generate static HTML files for each page during the build process, which can significantly enhance performance and reduce server load.
3. Automatic code splitting: Next.js automatically splits JavaScript code into smaller bundles, which are loaded only when needed. This helps reduce initial page load time.
4. File-based routing: Next.js uses a file-based routing system, where each page of the application corresponds to a file in the project directory structure. This simplifies navigation and organization.
5. API routes: Next.js allows you to create API routes within your application, making it easy to handle server-side logic and data fetching.
6. Built-in CSS and Sass support: Next.js provides built-in support for styling using CSS modules, Sass, and other CSS-in-JS solutions.

Getting Started!

1. Install Node.js and npm: If you haven’t already, download and install Node.js and npm (Node Package Manager) from the official website: https://nodejs.org/
2. Create a new Next.js project: Open your terminal and navigate to the directory where you want to create your Next.js project. Then, run the following command to create a new Next.js app:

npx create-next-app@latest

Replace latest with the desired version of next.js or keep it as ‘latest’ for latest version of your project. After that you will get following configuration options. Make them ‘Yes’ or ‘No’ according to your project preferences.

3. Navigate to your project directory: Once the project is created, navigate into the project directory:

cd next-js-app

4. Run the development server: Start the development server by running:

npm run dev

This command will start the Next.js development server, and you should see output indicating that the server is running.

5. check folder structure as your configurations

6. Access your Next.js app: Open your web browser and navigate to http://localhost:3000/. You should see your Next.js app up and running.