Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

Building a Cutting-Edge Commercial Website with Next.js 15, TypeScript, and Tailwind CSS 🚀

Welcome to an in-depth look at my latest project: a commercial website built with the latest technologies to provide a seamless, responsive, and blazing-fast user experience! In this blog post, I’ll walk you through the features, tech stack, and highlights of this project.

---

🌟 Project Overview

This website is designed to meet modern business needs with:

- Fast and reliable performance

- Scalability

- A visually appealing and consistent design

---

💼 Key Features

Here are the core features of this commercial website:

1. Home Page

The landing page provides users with a captivating introduction to the business.

2. Request a Quote Page

A dedicated page for users to request customized service quotes easily.

3. About Page

Learn more about the company’s mission, values, and vision.

4. Blog Page

Dynamic content is fetched via an API to keep users updated with the latest articles and insights.

5. Blog Detail Page

Supports dynamic routes to display individual blog posts seamlessly.

6. Pricing Page

Transparent pricing plans to fit varying customer needs.

7. Services Page

A showcase of the wide range of services the business offers.

8. Use Cases Page

Real-world examples of how the solutions can benefit different industries.

---

🎨 Tech Stack

The website is powered by the following technologies:

- Next.js 15

The latest version of Next.js provides server-side rendering (SSR) and incremental static regeneration (ISR) for a high-performance experience.

- TypeScript

Ensures code quality, maintainability, and scalability for the future.

- Tailwind CSS

A utility-first CSS framework for building beautiful, responsive designs quickly and consistently.

---

📂 Structure and Dynamic Routing

The blog section uses dynamic routes with Next.js. This allows for a structured yet flexible approach to managing individual blog pages. By fetching data via API calls, the blog remains dynamic and easy to maintain.

Example of a dynamic route: app/blog/[slug]/page.tsx.

```tsx

import Image from 'next/image'

import Link from 'next/link'

import { IoCalendarClearOutline as CalendarDays, IoTimeOutline as Clock, IoArrowBack as ArrowLeft} from "react-icons/io5";

import BlogCard from '@/components/BlogCard'

import SocialMedia from '@/components/SocialMedia'

import { Post, Author } from '@/app/utils/types';

async function getPost(slug: string): Promise<Post> {

const res = await fetch(https://jsonplaceholder.typicode.com/posts/${slug});

if (!res.ok) throw new Error('Failed to fetch post');

return res.json();

}

async function getAuthor(userId: number): Promise<Author> {

const res = await fetch(https://jsonplaceholder.typicode.com/users/${userId})

if (!res.ok) throw new Error('Failed to fetch author')

return res.json()

}

async function getRelatedPosts(): Promise<Post[]> {

const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')

if (!res.ok) throw new Error('Failed to fetch related posts')

return res.json()

}

async function getFeaturedPosts(): Promise<Post[]> {

const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3')

if (!res.ok) throw new Error('Failed to fetch featured posts')

return res.json()

}

export default async function BlogPost({ params }: { params: { slug: string } }) {

const { slug } = await params;

const post = await getPost(slug)

const author = await getAuthor(post.userId)

const relatedPosts = await getRelatedPosts()

const featuredPosts = await getFeaturedPosts()

const postUrl = "https://www.example.com/blog/my-awesome-post";

const postTitle = "My Awesome Blog Post";

return (

<Link

href="/blog"

className="inline-flex items-center text-black font-bold hover:text-primary transition-colors mb-8"

<ArrowLeft className="w-4 h-4 mr-2" /> Back to Blog

</Link>

<Image

src={https://picsum.photos/seed/${post.id}/800/600}

alt={post.title}

fill

priority

sizes="(max-width: 768px) 100vw, 50vw"

className="rounded-3xl object-cover"

</div>

<h1 className="text-4xl font-bold mb-4">{post.title}</h1>

<div>

<p className="font-bold">{author.name}</p>

{new Date().toISOString().split('T')[0]}

{Math.floor(Math.random() * 10) + 3} min read

</div>

</div>

</div>

<h2 className="text-2xl font-bold mb-4">Featured Posts</h2>

{featuredPosts.map((featuredPost) => (

<Image

src={https://picsum.photos/seed/${featuredPost.id}/800/600}

alt={featuredPost.title}

fill

sizes="(max-width: 768px) 100vw, 50vw"

className="rounded-xl object-cover"

</div>

<h3 className="font-bold hover:text-primary transition-colors">{featuredPost.title}</h3>

</Link>

<p className="text-sm text-gray-500">{new Date().toISOString().split('T')[0]}</p>

</div>

))}

</div>

<h2 className="text-3xl font-bold mb-6">Related Posts</h2>

{relatedPosts.map((relatedPost) => (

<BlogCard

key={relatedPost.id}

title={relatedPost.title}

excerpt={relatedPost.body.slice(0, 100) + '...'}

slug={relatedPost.id.toString()}

coverImage={https://picsum.photos/seed/${relatedPost.id}/800/600}

date={new Date().toISOString().split('T')[0]}

category={['Marketing', 'Design', 'Development'][Math.floor(Math.random() * 3)]}

readTime={${Math.floor(Math.random() * 10) + 3} min read}

))}

</div>

)

}

```

🔗 Resources and Downloads

Download Full Code: Get the complete project files here 👉 Download Full code 🔗 [Download](https://buymeacoffee.com/seyma/e/360711)

❤️ Show Some Love!

Enjoy the video, and don't forget to like, share, and subscribe for more amazing projects!

Support me ❤️ [Support Me](https://buymeacoffee.com/seyma)

🚀 Conclusion

This project demonstrates the power and flexibility of modern web development tools like Next.js, TypeScript, and Tailwind CSS. Whether you’re building a blog, a business site, or a portfolio, these technologies provide the foundation for exceptional user experiences.

Let me know your thoughts in the comments below or connect with me for feedback and discussions!

❤️ Thank you for reading!

## #NextJS15 #TypeScript #TailwindCSS #CommercialWebsite #ModernWebDesign #APIBasedBlog #BusinessWebsite #ResponsiveDesign #WebDevelopment #NextJSProject #TailwindUI #WebsiteFeatures #CustomQuotePage #TechDrivenDesign

Commercial Website with Next.js 15, TypeScript and Tailwind CSS 🚀

Buy Seyma a book

More from Seyma