Xây dựng trang blog với Next.js, Tailwind CSS và MDX

Hiện nay có rất nhiều nền tảng để xây dựng một trang blog cá nhân. Hôm nay, chúng ta sẽ xây dựng một trang web blog cơ bản với Next.js, Tailwind và MDX mà không cần sử dụng CMS!

MDX là gì?

MDX là sự kết hợp của Markdown và JavaScript. MDX cho phép bạn sử dụng JSX trong Markdown. Bạn có thể import các components như biểu đồ hoặc hộp thoại thông báo alerts,.. Điều này làm cho việc viết nội dung trở nên dễ dàng và phong phú hơn.

Tại sao chúng ta sẽ sử dụng MDX?

Chúng tôi sẽ sử dụng MDX vì nó rất mạnh và bạn có thể viết nhiều viết tương tác hơn với nó! Ngoài ra, bạn sẽ không cần phải trả bất kỳ khoản chi phí nào so với việc bạn sử dụng các CMS như wordpress,..

Hãy bắt đầu thôi!

Đây là dự án nhỏ mà chúng ta sẽ xây dựng bằng Next.js, Tailwind CSS và MDX. Đầu tiên, hãy tạo một dự án Next.js mới bằng cách chạy lệnh sau:

npx create-next-app next-blog

Để chạy được dòng lệnh trên, trước tiên máy tính của bạn phải được cài đặt Node.js.

Sau khi quá trình cài đặt hoàn tất, hãy chuyển đến thư mục dự án và chạy lệnh npm để khởi động máy chủ của dự án:

cd next-blog

và

npm run dev

Cài đặt Tailwind CSS

Việc cài đặt Tailwind CSS với Next.js rất đơn giản. Đầu tiên, chúng ta cần thêm một số thành phần ở nhánh dev bằng cách chạy lệnh sau:

npm install -D tailwindcss postcss autoprefixer

Sau đó, khởi tạo Tailwind CSS bằng cách chạy lệnh dưới đây để thêm 2 tệp tin tailwind.config.js và postcss.config.js vào thư mục dự án của bạn.

npx tailwindcss init -p

Bây giờ, chúng ta cần cho Tailwind CSS biết nơi tìm ra các class. Mở tailwind.config.js và thêm các dòng này dưới đây.

content: [

    "./pages/**/*.{js,ts,jsx,tsx}",

    "./components/**/*.{js,ts,jsx,tsx}",

],

Tiếp theo là tạo styles/globals.css và thêm ba dòng sau:

@tailwind base;

@tailwind components;

@tailwind utilities;

Bạn sẽ thu được kết quả thay đổi như hình sau và điều đó có nghĩa là Tailwind CSS đã được cài đặt thành công 🎉

Xây dựng Layout

Chúng ta sẽ tạo một Layout rất đơn giản. Chỉ cần thêm nội dung chính vào giữa Header và Footer. Hãy tạo một thư mục mới có tên components và thêm ba file mới là Layout.js, Header.js và Footer.js vào bên trong nó.

Hãy bắt đầu từ Layout.js:

import Header from "./Header";

import Footer from "./Footer";



function Layout({ children }) {

  return (

    <div className="container mx-auto max-w-5xl flex flex-col min-h-screen px-4">

      <Header />

      <main className="flex-1">{children}</main>

      <Footer />

    </div>

  );

}



export default Layout;

Tiếp theo, chúng ta sẻ cần phải bọc toàn bộ ứng dụng bên trong Layout đã được tạo ở bước trên. Hãy mở pages/_app.js và thêm vào tương tự như sau:

function MyApp({ Component, pageProps }) {

  return (

    <Layout>

      <Component {...pageProps} />

    </Layout>

  );

}



export default MyApp;

Cuối cùng, hãy xóa mọi thứ trong pages/index.js và thay bằng đoạn mã này.

export default function Home() {

  return (

    <div>

      <h1>Hello world</h1>

    </div>

  );

}