Δημιουργία Πλήρους Εφαρμογής Blog με το Next.js 14, το Strapi v4 Headless CMS και το Tailwind CSS

Σε αυτό το άρθρο, θα εξερευνήσουμε τη δημιουργία ενός πλήρους ιστολογίου (blog) χρησιμοποιώντας τις τελευταίες εκδόσεις του Next.js, του Strapi CMS και του Tailwind CSS. Αυτό το άρθρο θα καλύψει τα βήματα από την αρχική εγκατάσταση έως την εκκίνηση της εφαρμογής.

Βήμα 1: Εγκατάσταση του Next.js

Ξεκινούμε με τη δημιουργία ενός νέου Next.js project:

npx create-next-app my-nextjs-blog
cd my-nextjs-blog

Βήμα 2: Εγκατάσταση του Strapi CMS

Δημιουργούμε ένα νέο Strapi project με τον παρακάτω κώδικα:

npx create-strapi-app my-strapi-app --quickstart

Βήμα 3: Εγκατάσταση του Tailwind CSS

Εγκαθιστούμε το Tailwind CSS:

npm install tailwindcss postcss autoprefixer

Βήμα 4: Διαμόρφωση του Tailwind CSS

Δημιουργούμε τα απαραίτητα αρχεία για το Tailwind CSS:

npx tailwindcss init -p

Στη συνέχεια, προσθέτουμε τον κώδικα στο styles/globals.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Προσθέτουμε τα δικά μας στυλ εδώ */

Βήμα 5: Δημιουργία της Αρχικής Σελίδας με το Next.js

Στο αρχείο pages/index.js, προσθέτουμε τον κώδικα:

import Link from 'next/link';

export default function Home({ posts }) {
  return (
    <div>
      <h1>My Next.js Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

Βήμα 6: Εκκίνηση της Εφαρμογής

Τώρα, εκκινούμε την εφαρμογή Next.js και το Strapi CMS:

npm run strapi
npm run dev

Πρόκειται για ένα απλό παράδειγμα, και μπορείς να προσαρμόσεις τον κώδικα ανάλογα με τις ανάγκες σου. Προσθέσετε περισσότερες λειτουργίες, στυλ, και προσαρμογές όπως θες.

Με αυτά τα βήματα, έχεις δημιουργήσει μια πλήρως λειτουργική εφαρμογή blog χρησιμοποιώντας το Next.js 14, το Strapi v4 Headless CMS και το Tailwind CSS. Καλή δουλειά!

Αυτό είναι ένα βασικό παράδειγμα, και πρέπει να διασφαλίσεις ότι οι εκδόσεις των πακέτων είναι οι τελευταίες. Επίσης, πρέπει να παραμετροποιήσεις το Strapi CMS σύμφωνα με τις ανάγκες σου.