In a Next.js project, the best practice is to extract reusable UI sections (like the Hero section) into a component stored under a dedicated components/ directory. This helps keep your pages clean and maintainable, and allows you to reuse the Hero section elsewhere if needed.

How to connect with API.Bible

import { VERSES } from '@/lib/verses'

  (async () => {
    for (let v of VERSES) {
        let verse = `https://api.scripture.api.bible/v1/bibles/<bible-identifier>/verses/${v}`;
        let res = await fetch(verse, { headers: { 'api-key': process.env.BIBLE_API_KEY ?? '' } as HeadersInit });
        if (!res.ok) {
          console.error(`Failed to fetch verse ${v}:`, res.statusText);
          continue;
        }
    }
  })();

Some noted about Nextjs