Step 1: Define the Column To Sort By
Firstly you have to define the column to be used for sorting. For example, do imagine a "Post" eloquent model that has a "Title" column or an "Article" eloquent model that has a "Name" column and sort it in ascending order.
<?php // If you are using "Post" model then your code should be as follows $posts = Post::query()->sortBy('title', 'asc')->get(); // Or if you are using Article model then sort it by the "name" column $articles = Article::query()->sortBy('name', 'asc')->get();
<?php $posts = Post::query() ->select(['id', 'title', 'body']) ->sortBy('title', 'asc') ->whereNotNull('published_at') ->get();
Step 2: Define Previous and Next Logic
The next step is to define the logic to get the previous and next posts. The important part is to find the logic to get the location of the "index" from the collection of posts. To achieve this, you need to compare the existing post against the current Post collection. This location of this code should be in the "Show" method of your PostController.
<?php // PostController public function show(Post $post) { /* Collection of posts */ $posts = Post::query() ->select(['id', 'title', 'body']) ->sortBy('title', 'asc') ->whereNotNull('published_at') ->get(); $index = $posts->search(fn ($post) => $post->name === $post->name); /* Retrieve Previous and Next Post */ $prevPost = ($theIndex = ($index - 1)) >= 0 ? $posts[$theIndex] : null; $nextPost = ($theIndex = ($index + 1)) < count($posts) ? $posts[$theIndex] : null; return view('posts.show', compact('post', 'prevPost', 'nextPost')); }
Step 3: Create Laravel Livewire Component
Now that you have retrieved the previous and next post, you can then display it on the front-end blade template. In this case, you can create a Laravel Livewire component to make it reusable across the application. To create the Laravel Livewire component, do run the command below. If you have not installed it, do make sure to check this getting started guide from the official Laravel Livewire website.
php artisan livewire:make components/prev-next
COMPONENT CREATED 🤙 CLASS: app/Http/Livewire/Components/PrevNext.php VIEW: resources/views/livewire/components/prev-next.blade.php
<?php namespace App\Http\Livewire\Components; use Livewire\Component; class PrevNext extends Component { public $prevLabel; public $nextLabel; public $prevTitle; public $nextTitle; public $prevUrl; public $nextUrl; public function render() { return view('livewire.components.prev-next'); } }
<div class="grid grid-cols-1 {{ isset($prevTitle, $nextTitle) ? 'md:grid-cols-2' : null }} gap-4"> @isset($prevTitle) <a class="card flex flex-col" href="{{ $prevUrl }}" title="{{ $prevTitle }}" > <div class="flex items-center"> <svg class="w-3 h-auto fill-current text-gray-400 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"> <path d="M166.5 424.5l-143.1-152c-4.375-4.625-6.562-10.56-6.562-16.5c0-5.938 2.188-11.88 6.562-16.5l143.1-152c9.125-9.625 24.31-10.03 33.93-.9375c9.688 9.125 10.03 24.38 .9375 33.94l-128.4 135.5l128.4 135.5c9.094 9.562 8.75 24.75-.9375 33.94C190.9 434.5 175.7 434.1 166.5 424.5z"/> </svg> <span class="uppercase font-semibold text-sm text-gray-400"> {{ $prevLabel }} </span> </div> <p class="mt-1 line-clamp-1 text-gray-700 dark:text-gray-400"> {{ $prevTitle }} </p> </a> @endisset @isset($nextTitle) <a href="{{ $nextUrl }}" class="card flex flex-col" title="{{ $nextTitle }}" > <div class="flex items-center justify-end"> <span class="uppercase font-semibold text-sm text-gray-400"> {{ $nextLabel }} </span> <svg class="w-3 h-auto fill-current text-gray-400 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"> <path d="M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z"/> </svg> </div> <p class="mt-1 line-clamp-1 text-gray-700 dark:text-gray-400"> {{ $nextTitle }} </p> </a> @endisset </div>
Display Previous and Next Post on Front-end
Now that you have defined the component, you can call it from anywhere within your Laravel project using the "livewire:components.prev-next" tag.
<livewire:components.prev-next prevLabel="Prev Post" nextLabel="Next Post" :prevTitle="optional($prevPost)->title" :nextTitle="optional($nextPost)->title" :prevUrl="$prevPost ? route('posts.show', ['slug' => $prevPost->slug]) : null" :nextUrl="$nextPost ? route('posts.show', ['slug' => $nextPost->slug]) : null" />


By now you should be able to Get Prev And Next Records Sorted By Name and create custom Laravel Livewire components to make it reusable across the application. If you find this tutorial helpful do make sure to share it with your friends and cheers, happy coding!
Other Reads
- Getting previous and next record in Laravel
- Building Popular Posts Component with Laravel Livewire
- How to Implement Laravel Livewire Load More Pagination
- How to Implement Laravel Livewire Infinite Pagination