Change Blog Pagination from Prev/Next to Next/Prev

The JavaScript below should work. It swaps the URL and Title.

JavaScript

(function(){
    // Get previous element url and title
    const prevEl = document.querySelector('.item-pagination-link--prev');
    const prevUrl = prevEl && prevEl.getAttribute('href');
    const prevTitleEl = prevEl && prevEl.querySelector('.item-pagination-title');
    const prevTitle = prevTitleEl && prevTitleEl.textContent;
    const prevTitleWrapper = prevEl && prevEl.querySelector('.pagination-title-wrapper');
    const prevIcon = prevEl && prevEl.querySelector('.icon');

    // Get next element url and title
    const nextEl = document.querySelector('.item-pagination-link--next');
    const nextUrl = nextEl && nextEl.getAttribute('href');
    const nextTitleEl = nextEl && nextEl.querySelector('.item-pagination-title');
    const nextTitle = nextTitleEl && nextTitleEl.textContent;
    const nextTitleWrapper = nextEl && nextEl.querySelector('.pagination-title-wrapper');
    const nextIcon = nextEl && nextEl.querySelector('.icon');

    // Handle when user is on first page
    if(!prevEl && nextEl && nextTitleWrapper) {
        const tpl = document.createElement('template');
        tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div>`;
        nextTitleWrapper.innerHTML = nextTitleWrapper.innerHTML.replace(/\bNext\b/g, 'Previous');
        nextEl.classList.add('item-pagination-link--prev');
        nextEl.classList.remove('item-pagination-link--next');
        nextIcon && nextEl.removeChild(nextIcon);
        nextIcon && nextEl.prepend(tpl.content)
    }

    // Handle when user is on last page
    if(prevEl && !nextEl && prevTitleWrapper) {
        const tpl = document.createElement('template');
        tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></div>`;
        prevTitleWrapper.innerHTML = prevTitleWrapper.innerHTML.replace(/\bPrevious\b/g, 'Next');
        prevEl.classList.add('item-pagination-link--next');
        prevEl.classList.remove('item-pagination-link--prev');
        prevIcon && prevEl.removeChild(prevIcon);
        prevIcon && prevEl.appendChild(tpl.content)
    }


    // Set next element title and url with the previous
    if(nextEl && nextTitleEl && prevUrl && prevTitle) {
        nextEl.setAttribute('href', prevUrl);
        nextTitleEl.textContent = prevTitle;
    }

    // Set previous element title and url with the next
    if(prevEl && prevTitleEl && nextUrl && nextTitle) {
        prevEl.setAttribute('href', nextUrl);
        prevTitleEl.textContent = nextTitle;
    }

    
})()

Make sure you add the JavaScript to the Footer using Code Injection and place it between <script> tags, e.g.

<script>
  // Add JS here
</script>

Here's a video of me updating the JS via Chrome's dev tools to ensure it works.