Lesson 2: How to set up a new Next.js project

NEXT.JS Project Setup

Prerequisites:

• Node.js and npm (or yarn or pnpm): Ensure you have Node.js installed on your system. Node.js comes with npm (Node Package Manager). You can download it from the official Node.js website (nodejs.org). Yarn and pnpm are alternative package managers that you can install separately if you prefer.

Step-by-Step Procedure:

1. Create a New Next.js Project:

   • Open your terminal or command prompt.

   • Navigate to the directory where you want to create your project.

   • Use the create-next-app command to create a new Next.js project. You can use npm, yarn, or pnpm. Here are the commands:

     • npm:

       npx create-next-app@latest nextjs-backend-app

     • yarn:

       yarn create next-app nextjs-backend-app

     • pnpm:

       pnpm create next-app nextjs-app

     • Replace nextjs-backend-app with your desired project name.

   • The command will prompt you with a few questions:

     • Would you like to use TypeScript? (Yes/No) - Choose based on your preference. TypeScript adds static typing to your JavaScript code.

     • Would you like to use ESLint? (Yes/No) - ESLint helps you identify and fix coding style issues. It's recommended to choose "Yes."

     • Would you like to use Tailwind CSS? (Yes/No) - Tailwind CSS is a utility-first CSS framework. Choose based on your styling preference.

     • Would you like to use src/ directory? (Yes/No) - The src/ directory is a common convention for organizing your code. It's generally a good practice to use it, so choose "Yes."

     • Would you like to customize the default import alias? (@/*) (Yes/No) - You can customize the import alias, but the default is fine for most cases.

2. Navigate to Your Project:

   • Once the project is created, navigate into your project's directory:

     cd my-nextjs-backend-app

3. Run the Development Server:

   • Start the Next.js development server:

     • npm:

       npm run dev

     • yarn:

       yarn dev

     • pnpm:

       pnpm dev

   • This will start the development server, and you'll see a message indicating that the server is running (e.g., http://localhost:3000).

4. Open Your Browser:

   • Open your web browser and go to http://localhost:3000. You should see the default Next.js welcome page.

Sample Example to Test Your Next.js App:

Let's create a simple page to test if your Next.js app is working correctly.

1. Modify the app/page.jsx (or app/page.tsx if you used TypeScript):

   • Open the app/page.jsx (or app/page.tsx) file in your project's directory using a code editor.

   • Replace the existing code with the following:

     JavaScript

     // app/page.jsx
     import React from 'react';
     
     function HomePage() {
       return (
         <div>
           <h1>Welcome to My Next.js App!</h1>
           <p>This is a sample Next.js page.</p>
           <button onClick={() => alert('Button Clicked!')}>Click Me</button>
         </div>
       );
     }
     
     export default HomePage;

     TypeScript

     // app/page.tsx
     import React from 'react';
     
     const HomePage: React.FC = () => {
       return (
         <div>
           <h1>Welcome to My Next.js App!</h1>
           <p>This is a sample page.</p>
           <button onClick={() => alert('Button Clicked!')}>Click Me</button>
         </div>
       );
     };
     
     export default HomePage;

2. See the Changes:

   • Save the file.

   • Your browser should automatically refresh (if not, refresh it manually).

   • You should now see the heading "Welcome to My Next.js App!", the paragraph "This is a sample Next.js page.", and a button labeled "Click Me."

   • Click the button, and you should see an alert box with the message "Button Clicked!".

Explanation of the Example:

• We created a simple functional component called HomePage.

• The component returns JSX, which includes:

  • An <h1> heading.

  • A <p> paragraph.

  • A <button> with an onClick event handler. When the button is clicked, it displays a simple alert box.

• We exported the HomePage component as the default export, which is how Next.js uses it to render the page.

Troubleshooting:

• Server Not Running: If you don't see the page in your browser, make sure the development server is running in your terminal. If it's not, start it using npm run dev, yarn dev, or pnpm dev.

• Errors in the Browser: If you see errors in your browser's console, check your code for syntax errors or other issues.

• Port Conflicts: If the server fails to start because port 3000 is in use, you can try running the server on a different port using npm run dev -- -p <port_number>, yarn dev -- -p <port_number>, or pnpm dev -- -p <port_number>. Replace <port_number> with the desired port (e.g., 3001).

By following these steps, you can successfully set up a new Next.js project and test it with a simple example. This provides a solid foundation for your Next.js development journey.