Membuat Website dengan NextJs, TailwindCSS dan Framer Motion untuk Pemula🚀

Introduction

In this tutorial, you will learn how to create a website using Next.js, Tailwind CSS, and Framer Motion. This guide is designed for beginners and covers everything from setting up your project to implementing animations. By following these steps, you'll be able to build a responsive and animated web application.

Step 1: Download Assets

• Access the necessary assets for your project through the provided Google Drive link.
• Download the files and organize them in your project directory for easy access.

Step 2: Set Up the Starter Project

• Install Next.js by running the command:

  npx create-next-app@latest my-nextjs-app
  

• Navigate into your project folder:

  cd my-nextjs-app
  

• Install Tailwind CSS and Framer Motion:

  npm install tailwindcss framer-motion
  

• Initialize Tailwind CSS:

  npx tailwindcss init
  

Step 3: Configure Tailwind CSS

• In tailwind.config.js, set up the paths to your template files:

  module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• Add the Tailwind directives to your CSS file (e.g., globals.css):

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

Step 4: Change the Website Title

• Open pages/_app.js and modify the <title> tag to set your website's title.

Step 5: Change the Website Icon

• Place your favicon in the public directory.
• Update the <link rel="icon"> in pages/_app.js to point to your favicon.

Step 6: Change the Font

• Choose a font from Google Fonts.
• Import the font in your project by adding the link in pages/_app.js or include it in your CSS file.

Step 7: Create the Navbar Section

• Create a new component for the Navbar in the components directory.
• Use Tailwind CSS classes for styling:

  const Navbar = () => {
    return (
      <nav className="bg-gray-800 p-4">
        <h1 className="text-white">My Website</h1>
      </nav>
    );
  };
  

Step 8: Create the Hero Section

• Build a Hero section with a title and background image.
• Use Tailwind CSS for responsive design:

  const Hero = () => {
    return (
      <div className="hero bg-cover h-96" style={{ backgroundImage: 'url(/hero-image.jpg)' }}>
        <h2 className="text-4xl text-white">Welcome to My Site</h2>
      </div>
    );
  };
  

Step 9: Create the Services Section

• Add a section to showcase your services or features.
• Use a grid layout with Tailwind CSS for responsiveness.

Step 10: Create the Projects Section

• Display your projects with images and descriptions.
• Ensure each project is visually appealing using Tailwind CSS.

Step 11: Create the Contact Section

• Build a simple contact form.
• Use Tailwind CSS for styling the form elements.

Step 12: Create the Footer Section

• Add a footer with copyright information.
• Ensure it is visually consistent with the rest of the site.

Step 13: Implement Smooth Scrolling to Sections

• Use anchor links to navigate between sections.
• Add a "Scroll to Top" function for better user experience.

Step 14: Implement Framer Motion for Animation

• Import Framer Motion:

  import { motion } from 'framer-motion';
  

• Wrap sections in motion components to animate on load and scroll:

  const AnimatedSection = () => {
    return (
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        <h1>My Animated Section</h1>
      </motion.div>
    );
  };
  

Conclusion

You have now created a fully functional website using Next.js, Tailwind CSS, and Framer Motion. This guide covered initial setup, creating various sections, and adding animations. As next steps, consider exploring more advanced features in Next.js or delving deeper into Tailwind CSS for custom designs. Enjoy building your web applications!