In this tutorial, we will walk you through the process of building a complete e-commerce website using Next.js 15. Next.js is a popular React framework for building server-side rendered React applications. The latest version, Next.js 15, comes with several new features and improvements that make it even better for building e-commerce websites.
To follow along with this tutorial, you will need to have Node.js installed on your machine. You can download and install Node.js from the official website (https://nodejs.org/).
Step 1: Setup a new Next.js project
First, we need to create a new Next.js project. Open your terminal and run the following commands:
npx create-next-app my-ecommerce-app
cd my-ecommerce-app
npm run devThis will create a new Next.js project called my-ecommerce-app and start the development server. You can now open http://localhost:3000 in your browser to see the default Next.js landing page.
Step 2: Create the basic layout of the e-commerce website
Next, let’s create the basic layout of our e-commerce website. Create a new file called Layout.js in the components directory and add the following code:
import Head from 'next/head'
const Layout = ({ children }) => {
return (
<div>
<Head>
<title>My E-Commerce Website</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<header>
{/* Header content goes here */}
</header>
<main>{children}</main>
<footer>
{/* Footer content goes here */}
</footer>
</div>
)
}
export default LayoutNext, update the pages/_app.js file to use the Layout component:
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyAppStep 3: Add routing to the e-commerce website
Next, let’s add routing to our e-commerce website. Create a new file called pages/products.js in the pages directory and add the following code:
import Link from 'next/link'
const ProductsPage = () => {
return (
<div>
<h1>Products</h1>
<ul>
<li>
<Link href="/products/1">
<a>Product 1</a>
</Link>
</li>
<li>
<Link href="/products/2">
<a>Product 2</a>
</Link>
</li>
</ul>
</div>
)
}
export default ProductsPageNext, create a new file called pages/products/[id].js in the pages directory and add the following code:
import { useRouter } from 'next/router'
const ProductPage = () => {
const router = useRouter()
const { id } = router.query
return (
<div>
<h1>Product {id}</h1>
</div>
)
}
export default ProductPageStep 4: Add product data and render products dynamically
Next, let’s add product data to our e-commerce website and render products dynamically. Create a new file called utils/products.js in the utils directory and add the following code:
export const products = [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 },
]Next, update the pages/products.js file to render products dynamically:
import Link from 'next/link'
import { products } from '../utils/products'
const ProductsPage = () => {
return (
<div>
<h1>Products</h1>
<ul>
{products.map(product => (
<li key={product.id}>
<Link href={`/products/${product.id}`}>
<a>{product.name}</a>
</Link>
<p>{product.price}</p>
</li>
))}
</ul>
</div>
)
}
export default ProductsPageStep 5: Add a cart functionality
Next, let’s add a cart functionality to our e-commerce website. Create a new file called components/Cart.js in the components directory and add the following code:
const Cart = () => {
return (
<div>
<h2>Cart</h2>
{/* Cart items go here */}
</div>
)
}
export default CartNext, update the Layout.js file to include the Cart component:
import Cart from './Cart'
const Layout = ({ children }) => {
return (
<div>
<Cart />
{/* Rest of the layout */}
</div>
)
}Step 6: Style the e-commerce website
Finally, let’s style our e-commerce website. Create a new file called styles/globals.css in the styles directory and add the following code:
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}Next, update the _app.js file to include the global styles:
import '../styles/globals.css'That’s it! You now have a complete e-commerce website built with Next.js 15. Feel free to customize the website further by adding more features like user authentication, payment integration, and product filtering. Happy coding! 🚀
Get my FREE React Best Practices course: https://codinginflow.com/reactbestpractices
awesome work👍🎉❤
jumbing from junior nextjs to senior is challenging
Your emoji game for caption is on point 😂