How to add thumbnail support to WordPress next / previous post loop?

Question

I'm using the following code snippet for the next/previous navigation loop in Single.php.

<?php 
     $nextPost = get_next_post();
    if($nextPost) {
        $nextPostID = $nextPost->ID;
?>
    <a class="prev-post" href="<?php echo get_permalink( $nextPostID ); ?>">
        <?php echo $nextPost->post_title; ?>
    </a>
<?php } else {
        $first_post = get_posts( array(
            'posts_per_page'   => 1,
            'order' => 'ASC'
        ) );
        ?>
        <a class="prev-post" href="<?php echo get_permalink( $first_post[0]->ID ); ?>">
            <?php echo get_the_title( $first_post[0]->ID ); ?>
        </a>

<?php } ?>

<?php
    $prevPost = get_previous_post();
    if($prevPost) {
        $prevPostID = $prevPost->ID;
?>
    <a class="next-post" href="<?php echo get_permalink( $prevPostID ); ?>">
        <?php echo $prevPost->post_title; ?>
    </a>
<?php } else {
    $latest_post = get_posts( array(
        'posts_per_page'   => 1,
        'order' => 'DESC'
    ) );
    ?>
    <a class="next-post" href="<?php echo get_permalink( $latest_post[0]->ID ); ?>">
        <?php echo get_the_title( $latest_post[0]->ID ); ?>
    </a>
<?php } ?>

The script is working fine but I want it to show post thumbnails with size option (small/medium/large). I tried adding <?php echo get_the_post_thumbnail( $nextPost, 'large' ); ?> but I have to repeat it twice within the link and in each instance while it looks like it is working but the HTML produced is much like var_dump than anything:

<img width="1024" height="683" src="http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-1024x683.jpg" class="attachment-large size-large wp-post-image" alt="" decoding="async" loading="lazy" srcset="http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-1024x683.jpg 1024w, http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-300x200.jpg 300w, http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-150x100.jpg 150w, http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-768x512.jpg 768w, http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600-1536x1024.jpg 1536w, http://localhost:8888/testsite/wp-content/uploads/2023/04/thumb-6-1600.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px">

Answer 1

Wherever you want to place your image:

<?php get_the_post_thumbnail( get_previous_post(), [ 150, 150 ] ) ; ?>
<?php get_the_post_thumbnail( get_next_post(), [ 150, 150 ] ) ; ?>

You can replace the sizes [ 150, 150 ] with the 'thumbnail'.

Edit: The code that works for me:

$next_post = get_next_post();
$previous_post = get_previous_post();

the_post_navigation(
    array(
        'prev_text' => '<div class="post-thumb">' . get_the_post_thumbnail( $previous_post, [ 150, 150 ] ). '</div><div class="post-text"><p class="meta-nav">' . esc_html__( 'Previous post', 'lang' ) . '</p><p class="post-title">%title</p></div>',                        
        'next_text' => '<div class="post-text"><p class="meta-nav">' . esc_html__( 'Next post', 'lang' ) . '</p><p class="post-title">%title</p></div><div class="post-thumb">'. get_the_post_thumbnail( $next_post, [ 150, 150 ] ) . '</div>',
    )
);