Δημιουργία μιας ιστοσελίδας ηλεκτρονικού εμπορίου με το Next.js

Το Next.js είναι ένα ισχυρό framework βασισμένο στο React που παρέχει πολλά χαρακτηριστικά για να σας βοηθήσει να δημιουργήσετε γρήγορες και αξιόπιστες ιστοσελίδες ηλεκτρονικού εμπορίου. Σε αυτό το άρθρο, θα εξετάσουμε τα βήματα για τη δημιουργία ενός βασικού ιστότοπου ηλεκτρονικού εμπορίου με τη χρήση του Next.js, όπως η δημιουργία της αρχικής σελίδας, η προσθήκη στοιχείων προϊόντων, η δημιουργία σελίδων πληροφοριών για τα προϊόντα, η προσθήκη ενός καλαθιού αγορών και η προσθήκη πληρωμής. Ακολουθώντας αυτά τα βήματα, θα είστε σε θέση να δημιουργήσετε έναν λειτουργικό ιστότοπο ηλεκτρονικού εμπορίου που είναι εύκολος στη χρήση και τη συντήρηση.

Contents

Οφέλη από τη χρήση του Next.js Βήμα 1: Ρύθμιση του Project Βήμα 2: Δημιουργία της αρχικής σελίδας Βήμα 3: Προσθήκη Product Data Βήμα 4: Προσθήκη Product Details Pages Βήμα 5: Προσθήκη Shopping Cart Βήμα 6: Προσθήκη Checkout

Το Next.js Δημιουργήθηκε από την Vercel, μια εταιρεία που ειδικεύεται στα εργαλεία και τις υπηρεσίες ανάπτυξης ιστοσελίδων, και έχει σχεδιαστεί για να διευκολύνει τους προγραμματιστές να δημιουργούν διαδικτυακές εφαρμογές υψηλής απόδοσης. Το Next.js βασίζεται στο React, μια δημοφιλής βιβλιοθήκη JavaScript για τη δημιουργία user interfaces. Παρέχει ένα ολοκληρωμένο περιβάλλον ανάπτυξης (IDE) και ένα σύνολο χαρακτηριστικών που βοηθούν τους προγραμματιστές να δημιουργούν εφαρμογές που είναι τόσο αποδοτικές όσο και συντηρήσιμες.

Οφέλη από τη χρήση του Next.js

Ένα από τα βασικά πλεονεκτήματα της χρήσης του Next.js είναι οι δυνατότητες απόδοσης από την πλευρά του διακομιστή. Με τη χρήση του Next.js, οι προγραμματιστές μπορούν να ελαχιστοποιήσουν το χρόνο που ξοδεύουν για την επαναφόρτωση της ίδιας σελίδας κάθε φορά που τη ζητάει ένας χρήστης. Αυτό οφείλεται στο γεγονός ότι το Next.js μπορεί να αναπαραγάγει τη σελίδα στην πλευρά του διακομιστή, πράγμα που σημαίνει ότι η σελίδα δεν χρειάζεται να επαναφορτώνεται κάθε φορά που την ζητά ο χρήστης. Αυτό μπορεί να βελτιώσει δραστικά την απόδοση της εφαρμογής, με αποτέλεσμα μια πολύ πιο ομαλή και γρήγορη εμπειρία για τους χρήστες.

Ένα άλλο πλεονέκτημα της χρήσης του Next.js είναι η δυνατότητα δημιουργίας στατικών ιστοσελίδων με δυναμικό περιεχόμενο. Με τη χρήση του Next.js, οι προγραμματιστές μπορούν να δημιουργήσουν στατικούς ιστότοπους που μπορούν ωστόσο να ενημερώνονται με δυναμικό περιεχόμενο. Αυτό είναι εφικτό χάρη στις υβριδικές δυνατότητες στατικής-δυναμικής απόδοσης του Next.js. Αυτό επιτρέπει στους προγραμματιστές να δημιουργούν στατικούς ιστότοπους που μπορούν ακόμα να ενημερώνονται με δυναμικό περιεχόμενο, με αποτέλεσμα μια πολύ ταχύτερη και πιο αποτελεσματική εμπειρία για τους χρήστες.

- Advertisement -

Βήμα 1: Ρύθμιση του Project

Το πρώτο βήμα είναι να δημιουργήσετε το project χρησιμοποιώντας το Next.js. Για να το κάνετε αυτό, θα πρέπει να έχετε εγκαταστήσει το Node.js στον υπολογιστή σας. Μόλις εγκαταστήσετε το Node.js, δημιουργήστε έναν νέο κατάλογο για το project σας και εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το Next.js:

npm init next-app

Βήμα 2: Δημιουργία της αρχικής σελίδας

Το επόμενο βήμα είναι η δημιουργία της αρχικής σελίδας του ιστότοπου ηλεκτρονικού εμπορίου σας. Στο Next.js, οι σελίδες ορίζονται ως συστατικά και η αρχική σελίδα ορίζεται συνήθως σε ένα αρχείο που ονομάζεται index.js στον κατάλογο pages.

Στο αρχείο index.js, μπορείτε να ορίσετε τη διάταξη της αρχικής σας σελίδας. Για έναν ιστότοπο ηλεκτρονικού εμπορίου, η αρχική σελίδα τυπικά περιλαμβάνει μια κεφαλίδα, μια λίστα προϊόντων και ένα υποσέλιδο. Μπορείτε να χρησιμοποιήσετε HTML, CSS και JavaScript για να ορίσετε τη διάταξη της αρχικής σας σελίδας.

Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να δημιουργήσετε την αρχική σελίδα του ιστότοπου ηλεκτρονικού εμπορίου σας χρησιμοποιώντας το Next.js:

import React from 'react';

const Home = () => {
  const products = [
    {
      id: 1,
      name: 'Product 1',
      description: 'This is a description of product 1',
      price: 9.99,
      image: 'https://via.placeholder.com/150'
    },
    {
      id: 2,
      name: 'Product 2',
      description: 'This is a description of product 2',
      price: 19.99,
      image: 'https://via.placeholder.com/150'
    },
    {
      id: 3,
      name: 'Product 3',
      description: 'This is a description of product 3',
      price: 29.99,
      image: 'https://via.placeholder.com/150'
    },
  ];

  return (
    <div>
      <header>
        <h1>Welcome to Our E-Commerce Site</h1>
      </header>

      <main>
        <h2>Products</h2>
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p>Price: ${product.price}</p>
              <img src={product.image} alt={product.name} />
            </li>
          ))}
        </ul>
      </main>

      <footer>
        <p>Copyright © {new Date().getFullYear()} Our E-Commerce Site</p>
      </footer>
    </div>
  );
};

export default Home;

Βήμα 3: Προσθήκη Product Data

Στη συνέχεια, πρέπει να προσθέσετε δεδομένα προϊόντων στον ιστότοπό σας ηλεκτρονικού εμπορίου. Μπορείτε είτε να κωδικοποιήσετε τα product data στον ιστότοπό σας είτε να τα αντλήσετε από ένα API. Για αυτό το παράδειγμα, θα κωδικοποιήσουμε τα product data στον ιστότοπο.

Στο αρχείο index.js, ορίστε έναν πίνακα αντικειμένων προϊόντων. Κάθε αντικείμενο προϊόντος θα πρέπει να περιλαμβάνει πληροφορίες όπως το όνομα του προϊόντος, την περιγραφή, την τιμή και την εικόνα. Μπορείτε να χρησιμοποιήσετε αυτά τα δεδομένα προϊόντος για να αποδώσετε τη λίστα προϊόντων στην αρχική σελίδα σας.

Ένας τρόπος αποθήκευσης δεδομένων προϊόντων σε μια εφαρμογή Next.js είναι η χρήση ενός αρχείου JSON. Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να προσθέσετε δεδομένα προϊόντων στον ιστότοπο ηλεκτρονικού εμπορίου Next.js:

Δημιουργήστε έναν κατάλογο δεδομένων στη ρίζα του έργου σας Next.js.
Στον κατάλογο δεδομένων, δημιουργήστε ένα αρχείο με όνομα products.json και προσθέστε τα ακόλουθα δεδομένα::

[
  {
    "id": 1,
    "name": "Product 1",
    "description": "This is a description of product 1",
    "price": 9.99,
    "image": "https://via.placeholder.com/150"
  },
  {
    "id": 2,
    "name": "Product 2",
    "description": "This is a description of product 2",
    "price": 19.99,
    "image": "https://via.placeholder.com/150"
  },
  {
    "id": 3,
    "name": "Product 3",
    "description": "This is a description of product 3",
    "price": 29.99,
    "image": "https://via.placeholder.com
}]

3. Στο component Next.js, εισαγάγετε τα δεδομένα προϊόντος χρησιμοποιώντας την ενότητα “fs”

import React from 'react';
import fs from 'fs';

const Home = ({ products }) => {
  return (
    <div>
      <header>
        <h1>Welcome to Our E-Commerce Site</h1>
      </header>

      <main>
        <h2>Products</h2>
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p>Price: ${product.price}</p>
              <img src={product.image} alt={product.name} />
            </li>
          ))}
        </ul>
      </main>

      <footer>
        <p>Copyright © {new Date().getFullYear()} Our E-Commerce Site</p>
      </footer>
    </div>
  );
};

export const getStaticProps = async () => {
  const productsJSON = fs.readFileSync(`${process.cwd()}/data/products.json`);
  const products = JSON.parse(productsJSON);

  return {
    props: {
      products,
    },
  };
};

export default Home;

Σε αυτό το παράδειγμα, χρησιμοποιούμε τη μέθοδο getStaticProps για να ανακτήσουμε τα δεδομένα του προϊόντος και να τα καταστήσουμε διαθέσιμα ως στηρίγματα στο στοιχείο μας. Αυτή η μέθοδος εκτελείται κατά τη στιγμή της δημιουργίας, οπότε τα δεδομένα του προϊόντος θα είναι διαθέσιμα στο πρόγραμμα περιήγησης όταν φορτώνεται η σελίδα, χωρίς να απαιτείται API call..

Βήμα 4: Προσθήκη Product Details Pages

Για να εμφανίσετε τις λεπτομέρειες ενός προϊόντος, πρέπει να δημιουργήσετε μια ξεχωριστή σελίδα για κάθε προϊόν. Στο Next.js, μπορείτε να ορίσετε αυτές τις σελίδες ως δυναμικές διαδρομές. Μια δυναμική διαδρομή είναι μια διαδρομή που περιλαμβάνει μια παράμετρο, όπως το αναγνωριστικό προϊόντος, στη διεύθυνση URL.

Για να δημιουργήσετε μια δυναμική διαδρομή για τις σελίδες λεπτομερειών προϊόντων, θα πρέπει να δημιουργήσετε ένα νέο αρχείο στον κατάλογο pages για κάθε προϊόν. Το όνομα του αρχείου θα πρέπει να έχει τη μορφή [product-id].js, όπου [product-id] είναι το μοναδικό αναγνωριστικό του προϊόντος.

Σε κάθε σελίδα λεπτομερειών προϊόντος, μπορείτε να αποδώσετε τις λεπτομέρειες του προϊόντος, όπως το όνομα, την περιγραφή, την τιμή και την εικόνα του. Μπορείτε να ανακτήσετε τα δεδομένα του προϊόντος χρησιμοποιώντας το αναγνωριστικό προϊόντος από τη διεύθυνση URL.

Για να προσθέσετε product detail pages στον ιστότοπο ηλεκτρονικού εμπορίου Next.js, θα πρέπει να δημιουργήσετε ένα νέο στοιχείο που εμφανίζει τις λεπτομέρειες ενός συγκεκριμένου προϊόντος. Ακολουθεί ένας οδηγός βήμα προς βήμα για το πώς να το κάνετε αυτό:

Δημιουργήστε ένα νέο στοιχείο με όνομα ProductDetails σε ένα αρχείο με όνομα ProductDetails.js στον κατάλογο pages.

import React from 'react';

const ProductDetails = ({ product }) => {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
      <img src={product.image} alt={product.name} />
    </div>
  );
};

export default ProductDetails;

2. Στο στοιχείο Αρχική σελίδα, προσθέστε έναν σύνδεσμο σε κάθε προϊόν που οδηγεί τον χρήστη στη σελίδα product detail page. Μπορείτε να χρησιμοποιήσετε το στοιχείο Next.js Link για να το κάνετε αυτό.

import React from 'react';
import fs from 'fs';
import Link from 'next/link';

const Home = ({ products }) => {
  return (
    <div>
      <header>
        <h1>Welcome to Our E-Commerce Site</h1>
      </header>

      <main>
        <h2>Products</h2>
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              <Link href="/product/[id]" as={`/product/${product.id}`}>
                <a>
                  <h3>{product.name}</h3>
                  <p>{product.description}</p>
                  <p>Price: ${product.price}</p>
                  <img src={product.image} alt={product.name} />
                </a>
              </Link>
            </li>
          ))}
        </ul>
      </main>

      <footer>
        <p>Copyright © {new Date().getFullYear()} Our E-Commerce Site</p>
      </footer>
    </div>
  );
};

export const getStaticProps = async () => {
  const productsJSON = fs.readFileSync(`${process.cwd()}/data/products.json`);
  const products = JSON.parse(productsJSON);

  return {
    props: {
      products,
    },
  };
};

export default Home;

3. Δημιουργήστε ένα νέο αρχείο στον κατάλογο pages με όνομα [id].js και προσθέστε τον ακόλουθο κώδικα:

import React from 'react';
import fs from 'fs';
import ProductDetails from './ProductDetails';

const Product = ({ product }) => {
  return <ProductDetails product={product} />;
};

export const getStaticPaths = async () => {
  const productsJSON = fs.readFileSync(`${process.cwd()}/data/products.json`);
  const products = JSON.parse(productsJSON);

  const paths = products.map((product) => ({
    params: { id: `${product.id}` },
  }));

  return {
    paths,

Βήμα 5: Προσθήκη Shopping Cart

Για να επιτρέψετε στους πελάτες να αγοράζουν προϊόντα, πρέπει να προσθέσετε ένα καλάθι αγορών στον ιστότοπό σας ηλεκτρονικού εμπορίου. Μπορείτε να υλοποιήσετε το καλάθι αγορών ως κατάσταση στην εφαρμογή Next.js και να το ενημερώνετε κάθε φορά που ένας πελάτης προσθέτει ή αφαιρεί ένα προϊόν.

Για να υλοποιήσετε το καλάθι αγορών, θα πρέπει να χρησιμοποιήσετε την κατάσταση του React και να ορίσετε την αρχική κατάσταση στο στοιχείο που περιέχει το καλάθι αγορών. Μπορείτε να προσθέσετε ένα κουμπί σε κάθε προϊόν που επιτρέπει στους πελάτες να προσθέσουν το προϊόν στο καλάθι. Όταν ένας πελάτης προσθέτει ένα προϊόν στο καλάθι, θα πρέπει να ενημερώσετε την κατάσταση ώστε να αντικατοπτρίζει την αλλαγή.

Για να προσθέσετε ένα καλάθι αγορών στον ιστότοπο ηλεκτρονικού εμπορίου Next.js, θα πρέπει να δημιουργήσετε ένα νέο στοιχείο που θα εμφανίζει τα αντικείμενα στο καλάθι και θα επιτρέπει στο χρήστη να τροποποιεί τις ποσότητες κάθε αντικειμένου. Ακολουθεί ένας οδηγός βήμα προς βήμα για το πώς να το κάνετε αυτό:

Δημιουργήστε ένα νέο component με όνομα Cart σε ένα αρχείο με όνομα Cart.js στον κατάλογο components. Αυτό το στοιχείο θα εμφανίζει τα αντικείμενα στο καλάθι και θα επιτρέπει στο χρήστη να τροποποιεί τις ποσότητες κάθε αντικειμένου.

import React, { useState } from 'react';

const Cart = ({ items, onChangeQuantity }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {items.map((item) => (
          <tr key={item.product.id}>
            <td>{item.product.name}</td>
            <td>
              <input
                type="number"
                value={item.quantity}
                onChange={(e) => onChangeQuantity(item.product, e.target.value)}
              />
            </td>
            <td>${item.product.price * item.quantity}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Cart;

2. Δημιουργήστε ένα νέο component με όνομα CartPage σε ένα αρχείο με όνομα CartPage.js στον κατάλογο pages. Αυτό το στοιχείο θα χρησιμοποιεί το στοιχείο Cart και θα διαχειρίζεται την κατάσταση του καλαθιού αγορών.

import React, { useState } from 'react';
import Cart from '../components/Cart';

const CartPage = ({ products }) => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, { product, quantity: 1 }]);
  };

  const updateCartItem = (product, quantity) => {
    setCart(
      cart.map((item) => {
        if (item.product.id === product.id) {
          return { ...item, quantity };
        }
        return item;
      })
    );
  };

  return (
    <div>
      <header>
        <h1>Shopping Cart</h1>
      </header>

      <main>
        <Cart items={cart} onChangeQuantity={updateCartItem} />
      </main>

      <footer>
        <p>Copyright © {new Date().getFullYear()} Our E-Commerce Site</p>
      </footer>
    </div>
  );
};

export default CartPage;

3. Στο στοιχείο ProductDetails, προσθέστε ένα κουμπί που επιτρέπει στο χρήστη να προσθέσει το προϊόν στο καλάθι. Μπορείτε να περάσετε μια συνάρτηση από το στοιχείο ProductDetails στο στοιχείο Cart για να προσθέσετε αντικείμενα στο καλάθι.

import React from 'react';
import { useRouter } from 'next/router';

const ProductDetails = ({ product }) => {
  const router = useRouter();
  const handle

Βήμα 6: Προσθήκη Checkout

Μόλις ένας πελάτης προσθέσει προϊόντα στο καλάθι του, μπορεί να προχωρήσει στο ταμείο. Στη σελίδα πληρωμής, μπορείτε να εμφανίσετε τα προϊόντα στο καλάθι και να επιτρέψετε στον πελάτη να εισάγει τα στοιχεία χρέωσης και αποστολής.

Για να υλοποιήσετε τη σελίδα πληρωμής, θα πρέπει να δημιουργήσετε μια νέα σελίδα στον κατάλογο pages και να εκτελέσετε μια φόρμα

Για να προσθέσετε μια διαδικασία πληρωμής στον ιστότοπο ηλεκτρονικού εμπορίου Next.js, θα πρέπει να δημιουργήσετε ένα νέο component που θα επιτρέπει στο χρήστη να εισάγει τα στοιχεία χρέωσης και αποστολής, να επιλέξει μια μέθοδο πληρωμής και να κάνει την παραγγελία του. Ακολουθεί ένας οδηγός βήμα προς βήμα για το πώς να το κάνετε αυτό:

1, Δημιουργήστε ένα νέο component με όνομα CheckoutForm σε ένα αρχείο με όνομα CheckoutForm.js στον κατάλογο components. Αυτό το στοιχείο θα συλλέγει τις πληροφορίες χρέωσης και αποστολής του χρήστη, καθώς και τη μέθοδο πληρωμής του.

import React, { useState } from 'react';

const CheckoutForm = ({ onSubmit }) => {
  const [billingAddress, setBillingAddress] = useState('');
  const [shippingAddress, setShippingAddress] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('creditcard');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ billingAddress, shippingAddress, paymentMethod });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Billing Information</h2>
      <textarea
        value={billingAddress}
        onChange={(e) => setBillingAddress(e.target.value)}
      />

      <h2>Shipping Information</h2>
      <textarea
        value={shippingAddress}
        onChange={(e) => setShippingAddress(e.target.value)}
      />

      <h2>Payment Method</h2>
      <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
        <option value="creditcard">Credit Card</option>
        <option value="paypal">PayPal</option>
        <option value="applepay">Apple Pay</option>
        <option value="googlepay">Google Pay</option>
      </select>

      <button type="submit">Place Order</button>
    </form>
  );
};

export default CheckoutForm;

2. Δημιουργήστε ένα νέο component με όνομα CheckoutPage σε ένα αρχείο με όνομα CheckoutPage.js στον κατάλογο pages. Αυτό το στοιχείο θα χρησιμοποιεί το στοιχείο CheckoutForm και θα χειρίζεται την υποβολή της παραγγελίας.

import React, { useState } from 'react';
import CheckoutForm from '../components/CheckoutForm';

const CheckoutPage = () => {
  const [orderSuccess, setOrderSuccess] = useState(false);

  const handleSubmit = (order) => {
    // Submit the order to the server
    // ...

    // Show a success message
    setOrderSuccess(true);
  };

  return (
    <div>
      <header>
        <h1>Checkout</h1>
      </header>

      <main>
        {orderSuccess ? (
          <p>Thank you for your order!</p>
        ) : (
          <CheckoutForm onSubmit={handleSubmit} />
        )}
      </main>

      <footer>
        <p>Copyright © {new Date().getFullYear()} Our E-Commerce Site</p>
      </footer>
    </div>
  );
};

export default CheckoutPage;