Master Next.js & React: Buat Aplikasi Portofolio Modern 2023

Daftar Isi

Pengantar Next.js & React
Persiapan Lingkungan Pengembangan
Struktur Proyek Next.js
Membuat Halaman dan Routing
Membuat Komponen Reusable
Styling dengan Tailwind CSS
Fetch Data dengan getStaticProps & getServerSideProps
Deploy Aplikasi ke Vercel
Sumber Belajar dan Source Code

1. Pengantar Next.js & React

Next.js adalah framework React yang memungkinkan pembuatan aplikasi web modern dengan fitur seperti server-side rendering (SSR), static site generation (SSG), dan routing otomatis. React sendiri adalah library JavaScript untuk membangun antarmuka pengguna yang interaktif dan efisien.

Dengan menguasai Next.js dan React, Anda dapat membuat aplikasi portofolio yang cepat, SEO-friendly, dan mudah dikembangkan.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menginstall beberapa tools berikut:

Node.js (versi 14 ke atas)
npm atau yarn sebagai package manager
Code editor seperti Visual Studio Code

Untuk membuat proyek Next.js baru, jalankan perintah berikut di terminal:

npx create-next-app@latest nama-proyek-portfolio

Setelah selesai, masuk ke folder proyek dan jalankan server development:

cd nama-proyek-portfolio
npm run dev

Tampilan terminal yang menunjukkan proses pembuatan proyek Next.js dengan perintah npx create-next-app

3. Struktur Proyek Next.js

Berikut adalah struktur folder dasar proyek Next.js yang baru dibuat:

/nama-proyek-portfolio
├── node_modules
├── pages
│   ├── api
│   │   └── hello.js
│   ├── _app.js
│   └── index.js
├── public
│   └── favicon.ico
├── styles
│   ├── globals.css
│   └── Home.module.css
├── package.json
└── next.config.js

Folder pages berisi file-file yang menjadi halaman website. File _app.js digunakan untuk mengatur layout dan state global.

Diagram struktur folder proyek Next.js dengan folder pages, public, styles, dan file konfigurasi

4. Membuat Halaman dan Routing

Next.js menggunakan sistem routing berbasis file. Setiap file di dalam folder pages otomatis menjadi route.

Contoh membuat halaman About:

/pages/about.js

export default function About() {
  return (
    <main className="p-8 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">Tentang Saya</h1>
      <p>Ini adalah halaman About yang menjelaskan tentang portofolio saya.</p>
    </main>
  )
}

Anda bisa mengakses halaman ini di /about pada browser.

Ilustrasi konsep routing Next.js dengan folder pages dan file about.js

5. Membuat Komponen Reusable

Komponen React memungkinkan Anda membuat bagian UI yang dapat digunakan ulang. Contoh membuat komponen Card untuk menampilkan proyek:

/components/ProjectCard.js

export default function ProjectCard({ title, description, imageUrl, projectUrl }) {
  return (
    <a href={projectUrl} target="_blank" rel="noopener noreferrer" className="block border rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
      <img src={imageUrl} alt={`Screenshot proyek ${title}`} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-xl font-semibold mb-2">{title}</h3>
        <p className="text-gray-700">{description}</p>
      </div>
    </a>
  )
}

Kemudian gunakan komponen ini di halaman utama:

/pages/index.js

import ProjectCard from '../components/ProjectCard'

export default function Home() {
  return (
    <main className="p-8 max-w-5xl mx-auto space-y-8">
      <h1 className="text-4xl font-bold mb-6">Portofolio Saya</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <ProjectCard
          title="Website Company Profile"
          description="Website company profile dengan Next.js dan Tailwind CSS."
          imageUrl="https://placehold.co/400x300/png?text=Company+Profile+Project"
          projectUrl="https://github.com/username/company-profile"
        />
        <ProjectCard
          title="Aplikasi ToDo List"
          description="Aplikasi ToDo List interaktif menggunakan React hooks."
          imageUrl="https://placehold.co/400x300/png?text=ToDo+List+App"
          projectUrl="https://github.com/username/todo-list-app"
        />
        <ProjectCard
          title="Blog Pribadi"
          description="Blog pribadi dengan fitur markdown dan komentar."
          imageUrl="https://placehold.co/400x300/png?text=Personal+Blog"
          projectUrl="https://github.com/username/personal-blog"
        />
      </div>
    </main>
  )
}

Tampilan grid kartu proyek portofolio dengan gambar dan deskripsi singkat

6. Styling dengan Tailwind CSS

Tailwind CSS adalah utility-first CSS framework yang memudahkan styling dengan kelas-kelas siap pakai. Untuk mengintegrasikan Tailwind di Next.js, ikuti langkah berikut:

Install Tailwind dan dependencies:

npm install -D tailwindcss postcss autoprefixer

Inisialisasi konfigurasi Tailwind:
```
npx tailwindcss init -p
```

Konfigurasi


       tailwind.config.js

untuk mengaktifkan purge:

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

Tambahkan direktif Tailwind di


       styles/globals.css

:

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

Setelah konfigurasi, Anda bisa menggunakan kelas Tailwind di komponen React untuk styling cepat dan responsif.

Contoh penggunaan kelas utility Tailwind CSS pada komponen React

7. Fetch Data dengan getStaticProps & getServerSideProps

Next.js menyediakan dua metode utama untuk mengambil data sebelum halaman dirender:

getStaticProps: Mengambil data saat build time, cocok untuk konten statis.
getServerSideProps: Mengambil data setiap request, cocok untuk data dinamis.

Contoh penggunaan getStaticProps untuk menampilkan daftar proyek:

/pages/index.js

export async function getStaticProps() {
  const projects = [
    {
      id: 1,
      title: "Website Company Profile",
      description: "Website company profile dengan Next.js dan Tailwind CSS.",
      imageUrl: "https://placehold.co/400x300/png?text=Company+Profile+Project",
      projectUrl: "https://github.com/username/company-profile",
    },
    {
      id: 2,
      title: "Aplikasi ToDo List",
      description: "Aplikasi ToDo List interaktif menggunakan React hooks.",
      imageUrl: "https://placehold.co/400x300/png?text=ToDo+List+App",
      projectUrl: "https://github.com/username/todo-list-app",
    },
    {
      id: 3,
      title: "Blog Pribadi",
      description: "Blog pribadi dengan fitur markdown dan komentar.",
      imageUrl: "https://placehold.co/400x300/png?text=Personal+Blog",
      projectUrl: "https://github.com/username/personal-blog",
    },
  ]

  return {
    props: {
      projects,
    },
  }
}

import ProjectCard from '../components/ProjectCard'

export default function Home({ projects }) {
  return (
    <main className="p-8 max-w-5xl mx-auto space-y-8">
      <h1 className="text-4xl font-bold mb-6">Portofolio Saya</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {projects.map(project => (
          <ProjectCard
            key={project.id}
            title={project.title}
            description={project.description}
            imageUrl={project.imageUrl}
            projectUrl={project.projectUrl}
          />
        ))}
      </div>
    </main>
  )
}