Getting Started with Next.js

Next.js is a powerful React framework that makes building fast, SEO-friendly, and scalable web applications easier. It comes with server-side rendering (SSR), static site generation (SSG), API routes, and more!

Let’s break it down step by step and get you started! 👇

---

🔹 Setting Up a Next.js App

To quickly create a Next.js project, run:

npx create-next-app@latest my-next-app
cd my-next-app
npm install
npm run dev

🔹 Open http://localhost:3000 in your browser – 🎉 Your Next.js app is live!

---

🔹 Project Structure

Here’s what your new Next.js project will look like:

my-next-app/
│── pages/         # Routes & pages
│── public/        # Static assets (images, fonts, etc.)
│── styles/        # Global styles (CSS)
│── components/    # Reusable UI components
│── package.json   # Dependencies & scripts

---

🔹 Pages & Routing

📌 Next.js uses file-based routing – each file inside pages/ becomes a route.

• pages/index.js → http://localhost:3000/

• pages/about.js → http://localhost:3000/about

Create a new page:

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

---

🔹 Using Tailwind CSS in Next.js

Tailwind CSS makes styling faster and more efficient. Let’s set it up:

1️⃣ Install Tailwind CSS & Dependencies

Run the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2️⃣ Configure tailwind.config.js

Open tailwind.config.js and update the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3️⃣ Add Tailwind to Global CSS

Open styles/globals.css and add:

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

4️⃣ Use Tailwind Classes in Components

Now, you can use Tailwind in your Next.js components:

export default function Home() {
  return <h1 className="text-3xl font-bold text-center text-blue-600">Hello Next.js!</h1>;
}

🎉 That’s it! Tailwind is now fully integrated into your Next.js app.

---

🔹 Fetching Data in Next.js

Next.js provides multiple ways to fetch data:

1️⃣ Server-Side Rendering (SSR)

Fetches data on every request.

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();

  return { props: { data } };
}

2️⃣ Static Site Generation (SSG)

Fetches data at build time for better performance.

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();

  return { props: { data } };
}

---

🔹 API Routes in Next.js

📌 You can create your own backend with API routes in the pages/api/ folder.

Example: pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: "Hello from API!" });
}

Access it at http://localhost:3000/api/hello.

---

🔹 Deployment

Once your app is ready, deploy it for free using Vercel (the creators of Next.js).

npm install -g vercel
vercel

Your app will be live on a custom URL in seconds! 🚀

---

📚 Resources to Learn Next.js

🔹 Official Docs – nextjs.org
🔹 Free Course – Learn Next.js (YouTube)
🔹 UI Components – shadcn/ui
🔹 Deploy – vercel.com

---

🎯 Final Thoughts

Next.js is a game-changer for modern web development. It gives you the best of React with faster performance, SEO benefits, and built-in API routes.

💡 Now, go build something awesome with Next.js & Tailwind CSS! 🚀

---

Got questions? Drop them below! ⬇️ Happy coding! 🎉