Belajar membuat Landing Page dengan Next js 14 dan Tailwind CSS untuk Pemula | React js, Book Web

Introduction

In this tutorial, you will learn how to create a landing page using Next.js 14 and Tailwind CSS. This guide is designed for beginners and will take you through the process of building a book review website step-by-step. You will gain hands-on experience with essential tools and technologies used in modern web development.

Step 1: Install Next.js

• Visit the official Next.js website at nextjs.org.
• Open your terminal and run the following command to create a new Next.js app:

  npx create-next-app@latest my-book-review
  

• Navigate to your project directory:

  cd my-book-review
  

Step 2: Install Required Extensions

• Install the ES7+ code snippets extension for easier coding.
• Install Tailwind CSS IntelliSense for enhanced Tailwind CSS support in your IDE.

Step 3: Install React Icons

• In your terminal, execute:

  npm install react-icons
  

• This will allow you to use various icons in your project.

Step 4: Run Your Project

• Start the development server using:

  npm run dev
  

• Open your browser and go to http://localhost:3000 to see your Next.js app running.

Step 5: Understand the Next.js Structure

• Familiarize yourself with the folder structure:
  • pages/: Contains your application's pages.
  • public/: For static assets like images.
  • components/: Where you will create reusable components.

Step 6: Create Components

• Inside the components/ folder, create various components for your landing page:
  • Navbar
  • Hero Section
  • Popular Books Section
  • Latest Books Section
  • Subscribe Section
  • Testimonials Section
  • Footer

Step 7: Import Components into Pages

• Open the index.js file in the pages/ directory.
• Import your components at the top:

  import Navbar from '../components/Navbar';
  import Hero from '../components/Hero';
  // Import other components as needed
  

Step 8: Install Google Font (Quicksand)

• Include the Quicksand font in your project by adding the link to your _document.js file or directly in your index.js file:

  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400&display=swap" rel="stylesheet">
  

Step 9: Test Tailwind CSS

• Ensure Tailwind CSS is set up correctly by adding some sample classes to your components. Use utility classes like bg-blue-500 or text-white to style elements.

Step 10: Import Images into Public Folder

• Download images for your website and place them in the public/ directory.
• Reference these images in your components using:

  <Image src="/path/to/image.jpg" alt="Description" />
  

Step 11: Slice the Navbar

• Create a functional Navbar component structured with Tailwind CSS classes for styling.

Step 12: Slice the Hero Section

• Design the Hero section using Tailwind CSS, incorporating images, headings, and buttons.

Step 13: Slice the Popular Books Section

• Display a selection of popular books, utilizing a grid layout for visual appeal.

Step 14: Slice the Latest Books Section

• Follow a similar process as the Popular Books section to showcase the latest releases.

Step 15: Slice the Subscribe Section

• Create a section where users can subscribe to updates or newsletters.

Step 16: Slice the Testimonials Section

• Use Tailwind CSS to format testimonials from users or readers.

Step 17: Slice the Footer

• Design a footer that includes links and copyright information.

Conclusion

By following these steps, you have created a basic landing page for a book review website using Next.js 14 and Tailwind CSS. You can further enhance your website by adding more features, such as routing, dynamic data fetching, and additional styling. Explore the provided links to learn more about Next.js and Tailwind CSS, and continue building your coding skills!