Akademi Manajemen Informatika

Membikin Blog dengan NextJS dan Notion API

Daftar Isi:

Membikin blog pribadi memang menjadi kebutuhan seorang programmer. Di sana kita Bisa menuliskan hal – hal yang kita pelajari atau sekedar sharing pengalaman. Ketika ini, banyak yang memilih Notion sebagai platform Demi menulis konten mereka.

Kenapa menggunakan Notion?

Berdasarkan data dari Forbes pada tahun 2021, pengguna Notion sudah mencapai 20 juta. Notion sendiri merupakan platform pengelolaan konten yang Mempunyai banyak fitur unggulan seperti mudah Demi kolaborasi, support Notion AI, Luwes, dan banyak fitur lainnya. Berita baiknya, Notion juga Mempunyai fitur Notion API yang memudahkan kita Demi menggunakannya sebagai CMS (Content Management System) Demi blog kita.

Stack yang digunakan pada tutorial ini

Pastikan Anda sudah terlebih dahulu menginstall Node.js dan npm. Stack yang dipakai Demi tutorial ini adalah :

  • Notion : Content Management System (CMS) yang digunakan Demi mengelola konten blog.
  • NextJS 14 : Framework react yang kita gunakan Demi Membikin blog. Kita akan menggunakan versi 14.
  • TailwindCSS : Framework CSS yang berfokus pada utility class yang Mempunyai design yang bagus dan mudah di-customize.

Disclaimer : Pada tutorial ini kita akan berfokus kepada NextJS dan Notion API. Demi aspek tampilan visual dan SEO, Mitra – Mitra diharapkan melakukan improvisasi.

Konfigurasi Notion

Sebelum memulai konfigurasi, pastikan Anda Mempunyai akun Notion karena integrasi dengan NextJS memerlukan dua key, Yakni Notion Token dan Database ID

Membikin Notion Token

Tutorial Metode Membikin Notion Token, Anda Bisa lihat tutorial atau ke halaman Membikin token baru. Pada tutorial ini, saya menggunakan nama Integrasi Blog Pribadi.

Integrasi Blog
Copy Notion Token dari tab Secret dan simpan dengan Berkualitas. (Keep it secret 🤫)

Setelah Notion Token terbuat, kita akan mengatur Capabilities integrasinya hanya Demi read-only, sehingga fitur-fitur lain dapat dinonaktifkan.
Mengatur Capabilities pada Notion
Setelah berhasil Membikin Notion Token, langkah selanjutnya adalah Membikin Database ID.

Membikin Database ID

Anda Bisa menduplikasi template Blog Pribadi yang Eksis di sini. Demi tutorial duplikasi template, lihat pada tutorial.

Dalam template Blog Pribadi tersebut kita Mempunyai 7 atribute Primer :

  • Title. Judul postingan.
  • Slug. URL blog agar mudah Demi diakses.
  • Description: Penjelasan singkat mengenai topik yang dibahas.
  • Author. Nama penulis.
  • Status. Status postingan, apakah Lagi draft atau published.
  • Published Date. Lepas postingan di-publish.
  • Creation Date. Lepas postingan dibuat.

Template Notion Blog Pribadi

Setelah menduplikasi template di atas, buka template Notion di workspace Anda. Pada URL page tersebut, copy Database ID sesuai dengan posisi URL di Rendah ini:

https://www.notion.so/{workspace_name}/**{database_id}**?v={view_id}

Integrasi Notion Token dengan Database

Demi mengintegrasikan Notion Token dengan database, kita perlu menambahkan koneksi dengan Metode mengklik ••• di kanan atas, Lampau pilih Add Connections dan pilih Integrasi Blog Pribadi yang telah dibuat pada step sebelumnya, atau dapat mengikuti petunjuk dalam tutorial.

READ  Panduan Membikin tutorial video koding

Menambahkan Connections pada Notion

Tiba di step ini, kita telah Mempunyai Notion Token dan Database ID.

Konfigurasi NextJS

NextJS adalah framework React yang memudahkan kita dalam mengembangkan aplikasi berbasis react. NextJS juga support Server Side Rendering (SSR) yang cocok Demi Membikin blog menggunakan Notion API.

Demi menginstall NextJS Bisa menjalankan perintah ini pada terminal.

npx create-next-app@latest

Konfigurasi NextJS yang saya Mengenakan tutorial ini.

√ What is your project named? blog-pribadi
√ Would you like to use TypeScript with this project? Yes
√ Would you like to use ESLint with this project? Yes
√ Would you like to use Tailwind CSS with this project? Yes
√ Would you like to use `src/` directory with this project? Yes
√ Use App Router (recommended)? Yes
√ Would you like to customize the default import alias? No

Masuk ke directory blog-pribadi dan tambahkan plugin tailwind Demi membantu proses rendering HTML khususnya bagian typograhpy.

cd blog-pribadi
npm install -D @tailwindcss/typography

Buka tailwind.config.js dan copy paste konfigurasi di Rendah ini. Pada langkah ini kita hanya menghapus konfigurasi yang Bukan terpakai dan menambahkan plugins yang telah kita install barusan.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {}, // Hapus theme yang Bukan terpakai
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Pada step selanjutnya, kita hapus CSS class yang Bukan diperlukan dan mengganti Corak background pada body menjadi Corak putih. Caranya Bisa copy paste src/app/globals.css di Rendah ini.

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

body { 
	background: #ffffff; 
}

Selanjutnya hapus codingan yang Bukan terpakai di halaman page.tsx sehingga menyisakan codingan di Rendah ini.

export default function Home() {
  return >;
}

Kemudian kita run perintah di Rendah ini Demi memulai project.

npm run dev

Demi mengaksesnya project kita pada browser, kita dapat menuliskan pada URL :

http://localhost:3000

Kalau Bukan Eksis error, maka akan muncul halaman putih tanpa tulisan apa – apa. Dengan begini, kita berhasil menghapus codingan yang Bukan terpakai dan siap Demi melanjutkan integrasi dengan Notion.

Integrasi Notion dengan NextJS

Kita akan menyimpan Notion Token dan Database ID yang telah kita dapatkan dengan format seperti di Rendah ini pada .env.local . Kalau belum Eksis, Bisa di buat file terlebih dahulu, pastikan Demi membuatnya pada root project.

NOTION_TOKEN="secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NOTION_DATABASE_ID="xxxxxxxxxxxxxxxxxxxxxxx"

Demi memudahkan dalam menampilkan data Notion di project kita, maka kita perlu menginstall library Notion.

READ  Mengenal apa itu data struktur ld+json pada SEO?

npm install @notionhq/client @notion-render/client

Membikin List Blog

Kita akan Membikin tampilan list blog seperti di Rendah ini. Data ini diambil dari template notion yang telah kita buat sebelumnya, dan hanya menampilkan list blog yang statusnya sudah Published.

Tampilan List Blog
Buat file baru di src/app/lib/notion.tsx dan copy paste codingan di Rendah ini.

const { Client } = require("@notionhq/client");

export const notion = new Client({
  auth: process.env.NOTION_TOKEN,
});

export const getAllPublishedBlog = async () => {
  const posts = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    filter: {
      property: "status",
      select: {
        equals: "Published",
      },
    },
    sorts: [
      {
        property: "createdTime",
        direction: "descending",
      },
    ],
  });

  const allPosts = posts.results;

  return allPosts.map((post: any) => {
    return getPageContent(post);
  });
};

const getPageContent = (post: any) => {
  return {
    id: post.id,
    title: post.properties.title.title[0].plain_text,
    author: post.properties.author.select.name,
    publishedDate: post.properties.publishedDate.date.start,
    slug: post.properties.slug.formula.string,
    description: post.properties.description.rich_text[0].plain_text,
  };
};
  • getAllPublishedBlog : mengambil data di Notion yang status = Published dan diurutkan berdasarkan createdTime secara descending.
  • getPageContent: memformat content dari object Post agar hasil dari fungsi tersebut hanya berisi object yang kita butuhkan.

Tambahkan file baru src/app/types/Notion.tsx Demi deklarasi types.

export type Post = {
	id: string;
	title: string;
	slug: string;
	description: string;
	author: string;
	status: string;
	publishedDate: Date;
	createdDate: Date;
}

Hapus Seluruh codingan yang Eksis di page.tsx dan copy paste dari codingan di Rendah ini. Pada halaman ini, kita akan memanggil getAllPublishedBlog dan me-render-nya pada halaman Primer.

import Link from "next/link";
import { getAllPublishedBlog } from "./lib/notion";
import { Post } from "./types/Notion";

export default async function Home() {
  const posts = await fetchBlogData();

  return (
    main className="flex min-h-screen flex-col items-center justify-between p-24">
      div className="w-[672px] mx-auto">
        h1 className="text-3xl font-bold mb-6">List Blogh1>

        {posts.length === 0 ? (
          p>No posts available.p>
        ) : (
          posts.map((post: Post, index: number) => (
            article
              key={index}
              className="bg-white rounded-lg cursor-pointer p-4 mb-4 border-b border-gray-300"
            >
              div>
                span className="text-gray-500 mb-2 text-sm">
                  {post.publishedDate.toString()}
                span>
                h2 className="text-xl font-semibold mb-2">
                  Link
                    className="text-blue-500 hover:underline"
                    href={`/blog/${encodeURIComponent(post.slug)}`}
                  >
                    {post.title}
                  Link>
                h2>

                p>{post.description}p>
              div>
            article>
          ))
        )}
      div>
    main>
  );
}

async function fetchBlogData() {
  const res = getAllPublishedBlog();
  return res;
}

Membikin Detail Blog

Kalau kita mengklik salah satu judul blog dari list blog yang Eksis, maka halaman tersebut akan pergi ke halaman Detail Blog berdasarkan slug yang dikirimkan.

READ  Skill Paling Krusial Kepada programmer - menurut para 'dewa'

Halaman Detail Blog
Demi implementasinya, kita kembali Tengah file ke lib/notion.tsx dan tambahkan codingan di Rendah ini.

import { NotionRenderer } from "@notion-render/client"; 

// tambahkan di Rendah function getAllPublishedBlog

export const getSinglePost = async (slug: string) => {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    filter: {
      property: "slug",
      formula: {
        string: {
          equals: slug,
        },
      },
    },
  });

  const singlePost = response.results[0];

  const responseBlockPages = await notion.blocks.children.list({
    block_id: singlePost.id,
  });

  const content = responseBlockPages.results;
  const renderer = new NotionRenderer({
    client: notion,
  });
  const html = await renderer.render(...content);

  return {
    ...getPageContent(singlePost),
    content: html,
  };
};
  • getSinglePost : mengambil data di Notion yang slug = parameter yang kita kirim. Selanjutnya kita mengambil isi block yang Eksis di dalam Notion dan me-render-nya ke dalam format HTML menggunakan library @notion-render/client yang telah kita install sebelumnya.

Buat file baru di src/app/blog/[slug]/page.tsx dan copy paste codingan di Rendah ini. Pada halaman ini kita akan me-render halaman detail blog dengan memanggil getSinglePost. Parameter slug yang Eksis di URL kita lempar ke dalam fungsi getSinglePost Demi mendapatkan data Notion.

import { getSinglePost } from "@/app/lib/notion";
import Link from "next/link";

export default async function Page({ params }: { params: { slug: string } }) {
  const post = await fetchBlogData(params.slug);

  return (
    main className="flex min-h-screen flex-col items-center justify-between p-24">
      div className="w-[672px] mx-auto">
        Link href="/" className="text-blue-500">
          < Go Back
        Link>
        div className="my-4">
		  span className="text-gray-600">
		    {post.publishedDate} | By {post.author}{" "}
		  span>
		div>
        h1 className="text-6xl text-gray-900 font-bold my-6">{post.title}h1>
        div
          className="prose"
          dangerouslySetInnerHTML={{ __html: post.content }}
        >div>
      div>
    main>
  );
}

async function fetchBlogData(slug: string) {
  const res = getSinglePost(slug);
  return res;
}

Deploy ke Vercel

Kalau semuanya sudah berjalan dengan Berkualitas, Anda Bisa push codingan Anda ke github dan mendeploy ke Vercel. Pastikan Notion Token dan Database ID Anda terkonfigurasi dengan Berkualitas di Vercel.

Penutup

Demi source code tutorial ini Bisa di lihat di github.

Kalau Anda Ingin melakukan perubahan dalam konten blog Anda, Anda Bukan perlu mengubah codingan apapun, Anda hanya perlu mengubahnya pada notion database dan perubahan tersebut akan langsung teraplikasi pada blog Anda. Selamat mencoba.