Setting Up a Next.js Project

This guide will help you create a new Next.js project and set up a folder structure using the app directory with two pages: homepage and payments.

Prerequisites

Before you begin, ensure you have Node.js and npm installed on your machine. You can download them from nodejs.org (opens in a new tab). Assuming you are already a nodejs developer, You should already have those installed

Step 1: Create a New Next.js Project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App (opens in a new tab). We will create a project named, Tech For Charity.

npx create-next-app@latest tech-for-charity --typescript --eslint

Navigate to the created project

cd tech-for-charity

Project structure

We will create a simple donation project to showcase mpesa express (STK PUSH) integration. For these we will need only two pages, the homepage to handle the payment and a payments to show the donations

Inside the tech-for-charity directory, set up the following folder structure:

tech-for-charity/
│
├── app/
│   ├── payments/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
│
|── components/
├── public/
│   └── favicon.ico
│
├── styles/
│   ├── globals.css
│
├── .gitignore
├── next.config.js
├── package.json
└── README.md

We will also setup Tailwind css to handle styling - This is optional though.

If you already chose tailwindcss when bootstrapping your nextjs project, You dont have to go through the tailwindcss setup since it will be setup by default

If You dont have tailwindcss already setup, You can follow the below steps.

TailwindCss Installation & Setup

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Optionally Run the project to ensure everything is setup properly

npm run dev

confirm if tailwind css is well setup by using any of its directives.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello From Mpesa Intergration By Rizwan
    </h1>
  )
}