Download Laravel App
https://laravel.com/docs/11.x/installation
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel11dev
DB_USERNAME=root
DB_PASSWORD=root
Create Model and Migration
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Product -m
A new file named Product.php will be created in the app directory and database/migrations directory to generate the table in our database
app/Models/Product.php
//app/Models/Product.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'name',
'image',
'price'
];
}
database\migrations\create_products_table.php
//database\migrations\create_products_table.ph
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('image');
$table->integer('price');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('products');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Migration table created successfully.
check database table
Create Controller and Request
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller ProductController
app\Http\Controllers\ProductController.php
//app\Http\Controllers\ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
use Illuminate\Support\Facades\Storage; //php artisan storage:link = php artisan storage:link = http://127.0.0.1:8000/storage/1.jpg
class ProductController extends Controller
{
public function index()
{
//$products = Product::all(); // All Product
$products = Product::paginate(3);
// Return Json Response
return response()->json([
'results' => $products
], 200);
}
}
Routes install
php artisan install:api
All API requests will need the header Accept: application/json.
open routes/api.php and update the following code
routes\api.php
//routes\api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
Route::get('/user', function (Request $request) {
return $request->user();
})->middleware('auth:sanctum');
Route::get('products', [ProductController::class, 'index']);
Run C:\xampp\htdocs\laravel\myapp>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
Install nextjs
https://nextjs.org/
npx create-next-app@latest
install axios
npm install axios
https://www.npmjs.com/package/axios
app\page.tsx
app\page.tsx
//app\page.tsx
import TableData from "@/components/tabledata";
export default function Home() {
return (
<div className="w-screen py-20 flex justify-center flex-col items-center bg-gray-300">
<div className="flex items-center justify-between gap-1 mb-5">
<h1 className="text-4xl font-bold">Next.js 14 Laravel 11 Pagination Next Prev Mysql | TailwindCSS DaisyUI</h1>
</div>
<TableData/>
</div>
);
}
components\tabledata.tsx
//components\tabledata.tsx
"use client";
import React, { useEffect, useState } from "react";
import axios from 'axios' //npm install axios https://www.npmjs.com/package/axios
import Image from 'next/image'
export default function Products() {
const [products, setProducts] = useState([]);
const [info, setInfo] = useState({});
const url = "http://127.0.0.1:8000/api/products";
useEffect(() => {
fetchProducts(url);
}, []);
const fetchProducts = (url) => {
axios
.get(url)
.then((data) => {
setProducts(data.data.results.data);
//console.log(data.data.results.data);
setInfo(data.data.results);
//console.log(data.data.results.next_page_url);
})
.catch((error) => {
console.log(error);
});
};
const handleNextPage = () => {
fetchProducts(info.next_page_url);
window.scrollTo(0, 0);
};
const handlePreviousPage = () => {
fetchProducts(info.prev_page_url);
window.scrollTo(0, 0);
};
return (
<div className="">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-white mb-8">Introducing Our Latest Product</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{products.map((item, index) => (
<div key={index} className="bg-white rounded-lg shadow-lg p-8">
<div className="relative overflow-hidden">
<Image
src={`http://127.0.0.1:8000/storage/${item.image}`}
width={400}
height={400}
alt="Photo"
/>
<div className="absolute inset-0 bg-black opacity-40" />
<div className="absolute inset-0 flex items-center justify-center">
<button className="bg-white text-gray-900 py-2 px-6 rounded-full font-bold hover:bg-gray-300">View Product</button>
</div>
</div>
<h3 className="text-xl font-bold text-gray-900 mt-4">{item.name}</h3>
<p className="text-gray-500 text-sm mt-2">Description: {item.name}</p>
<div className="flex items-center justify-between mt-4">
<span className="text-gray-900 font-bold text-lg">${item.price}.99</span>
<button className="bg-gray-900 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800">Add to Cart</button>
</div>
</div>
))}
</div>
<div className="w-1/2 items-center px-4 mt-6">
<div className="join grid grid-cols-2">
{info.prev_page_url ? (
<button className="join-item btn btn-primary btn-outline" onClick={handlePreviousPage}>
Previous
</button>
) : null}
{info.next_page_url ? (
<button className="join-item btn btn-primary btn-outline" onClick={handleNextPage}>
Next
</button>
) : null}
</div>
</div>
</div>
</div>
);
}
next.config.mjs
/** @type {import('next').NextConfig} */
//const nextConfig = {};
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['localhost', 'cairocdoers-ednalan.com', '127.0.0.1'] // == Domain name
}
}
export default nextConfig;
run C:\nextjs>npm run dev https://github.com/cairocodes/Next.js-14-Laravel-11-Pagination-Next-Prev-Mysql-TailwindCSS-DaisyUI
