Next.JS and Vrite

[curiouscod3]

I've just read an article about the Astro and Vrite in the blog.
It would be great to read a new post about NextJS and Vrite integration next time :)
If not possible, It would be nice to know how to integrate or utilize Vrite for NextJs based projects.

[areknawo]

Other guides and integrations are planned. Currently, I'm focused on reaching stability and feature completeness.
That said, to give you an idea of potential integration (Next.js App Router, using as SSG) with Vrite SDK:

1. Fetch a list of posts and generate dynamic routes (likely with generateStaticParams);
2. Fetch the JSON content based on the slug inside the page (RSC);
3. Use htmlOutputTransformer (from Vrite SDK) to convert JSON content to html and render it on the page.

With custom transformers, this can be made even better (e.g. convert to JSX element instead of HTML string), but this definitely requires its own docs/blog posts.

[sFritsch09]

I implemented my blog with vrite completely in SSR and rendered the markdown with next-mdx-remote. When I'm on my system I can share my code :)

[areknawo]

That would be great! I'm pretty sure it's a rather straightforward process. I'm really hoping I can focus on writing better docs and guides for Vrite soon.

[sFritsch09]

Oki then I will try to explain it well so that you can use it for documentation 🚀

[sFritsch09]

How to use Vrite with Next with SSR

Code structure in app router:

• blog

  • [slug]
    • page.js
  • page.js
  • post.component.js (client side)

• api

  • [slug]
    • route.js
  • route.js

To render the blog content from Vrite as github flavored markdown and parse it to the client component we use next-mdx-remote

API

Let's start with the api where we use Vrite SDK:

// api/route.js

import { createClient } from '@vrite/sdk/api';

const vrite = createClient({
// your vrite token from env
	token: process.env.VRITE,
});
// this way we don't use cache and fetch our blog on every call
export const revalidate = 0;
export async function GET(req) {
	const { searchParams } = new URL(req.url);
// here we can get any sereachParam, in this example I want to get the language
	const lang = searchParams.get('lang');

	const contentGroups = await vrite.contentGroups.list();
	// console.log('groups:', contentGroups);

	// checking language
	if (lang === 'en') {
		const contentId = await contentGroups.filter((item) => item.name === 'YOUR-VRITE-TITLE[en]')[0]
			.id;
		const contentPieces = await vrite.contentPieces.list({
			contentGroupId: contentId,
		});
		return Response.json(contentPieces);
	} else {
		const contentId = await contentGroups.filter((item) => item.name === 'YOUR-VRITE-TITLE')[0].id;
		const contentPieces = await vrite.contentPieces.list({
			contentGroupId: contentId,
		});
		return Response.json(contentPieces);
	}
}

// api/[slug]/route.js

import { createClient } from '@vrite/sdk/api';
import { gfmOutputTransformer } from '@vrite/sdk/transformers';

const vrite = createClient({
	token: process.env.VRITE,
});
export const revalidate = 0;
export async function GET(req, { params }) {
	const { searchParams } = new URL(req.url);
	const lang = searchParams.get('lang');
	const content = searchParams.get('content');
	const slug = params.slug;

	const contentGroups = await vrite.contentGroups.list();
	// checking language
	if (lang === 'en') {
		const contentId = await contentGroups.filter((item) => item.name === 'YOUR-VRITE-TITLE[en]')[0]
			.id;
		const contentPieces = await vrite.contentPieces.list({
			contentGroupId: contentId,
		});
		// get id from slug
		const id = contentPieces.filter((post) => post.slug === slug)[0].id;
		const contentPiece = await vrite.contentPieces.get({
			id: id,
			content: true,
		});
		if (content === 'true') {
			const gfmOutput = gfmOutputTransformer(contentPiece.content);
			return Response.json(gfmOutput);
		} else {
			return Response.json(contentPiece);
		}
	} else {
		const contentId = await contentGroups.filter((item) => item.name === 'YOUR-VRITE-TITLE')[0].id;
		const contentPieces = await vrite.contentPieces.list({
			contentGroupId: contentId,
		});
		// get id from slug
		const id = contentPieces.filter((post) => post.slug === slug)[0].id;
		const contentPiece = await vrite.contentPieces.get({
			id: id,
			content: true,
		});
		if (content === 'true') {
			const gfmOutput = gfmOutputTransformer(contentPiece.content);
			return Response.json(gfmOutput);
		} else {
			return Response.json(contentPiece);
		}
	}
}

Server Component

Now we will use our api to get all information from Vrite, in this example I included two Dashboards with different languages

// blog/page.js

import { Link } from '../../../navigation';
// I use styled-components here but you can also use *tailwindcss*
import { PostWrapper } from './blog.styles';
import Container from './blog.styles';
import { headers } from 'next/headers';
import { Suspense } from 'react';
// this is the client side component and we wrap it with *Suspense*
import Post from './post.component';

export const metadata = {
	title: 'Blog Title',
	metadataBase: new URL('YOUR-URL'),
	description: 'your description',
	referrer: 'origin-when-cross-origin',
	openGraph: {
		title: 'Blog',
		description: 'your description',
	},
};

export default async function Blog({ params: { locale } }) {
	const host = headers().get('host');
	const protocol = process?.env.NODE_ENV === 'production' ? 'https' : 'http';
// retrieve data from our api
	const res = await fetch(`${protocol}://${host}/api/blog?lang=${locale}`, {
		method: 'GET',
	});
	const blogPosts = await res.json();
	return (
		<div className="main">
			<Container>
				{blogPosts.map((post, index) => (
					<Suspense
						key={index}
						fallback={<YOUR-SKELETON-HERE/>}
					>
						<PostWrapper key={index}>
							<Link href={`/blog/${post.slug}`}>
								<Post
									title={post.title}
									desc={post.description}
									date={post.date}
									tags={post.tags}
									cover={post.coverUrl}
								/>
							</Link>
						</PostWrapper>
					</Suspense>
				))}
			</Container>
		</div>
	);
}

// blog/[slug]/page.js

import { Article, CoverWrapper } from '../blog.styles';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { headers } from 'next/headers';
import { Suspense } from 'react';
import Image from 'next/image';

export async function generateMetadata({ params: { locale, slug } }) {
	const host = headers().get('host');
	const protocol = process?.env.NODE_ENV === 'production' ? 'http' : 'http';
	const res = await fetch(`${protocol}://${host}/api/blog/${slug}?lang=${locale}`, {
		method: 'GET',
	});
	const post = await res.json();
	return {
		title: 'Blog',
		keywords: post.tags.map((tag) => tag.label),
		openGraph: {
			title: post.title,
			description: post.description.replace('<p>', '').replace('</p>', ''),
			type: 'article',
			publishedTime: post.date,
			authors: ['AUTHOR'],
		},
	};
}
export default async function BlogId({ params: { locale, slug } }) {
	const host = headers().get('host');
	const protocol = process?.env.NODE_ENV === 'production' ? 'https' : 'http';
	// post markdown
	const res = await fetch(`${protocol}://${host}/api/blog/${slug}?lang=${locale}&content=true`, {
		method: 'GET',
	});
	const markdown = await res.json();
	// details
	const resp = await fetch(`${protocol}://${host}/api/blog/${slug}?lang=${locale}`, {
		method: 'GET',
	});
	const post = await resp.json();

	const components = {
		h3: (props) => <h3 className="mt-6">{props.children}</h3>,
		h4: (props) => <h4 className="mt-6">{props.children}</h4>,
		h2: (props) => <h2 className="mt-10 !text-2xl">{props.children}</h2>,
		p: (props) => <p className="mt-4">{props.children}</p>,
		table: (props) => (
			<div className="p-4 z-0 flex flex-col relative justify-between gap-4 bg-content1 overflow-auto rounded-large shadow-small w-full">
				<table className="min-w-full h-auto table-auto w-full">{props.children}</table>
			</div>
		),
		code: (props) => (
			<div className="overflow-x-auto">
				<code className="px-2 py-1 mt-4 h-fit font-mono font-normal inline-block whitespace-wrap bg-secondary/20 text-secondary text-small rounded-small">
					{props.children}
				</code>
			</div>
		),
	};
	return (
		<div className="main">
			<Article>
				<CoverWrapper className="rounded-lg border-4 border-primary dark:border-secondary">
					<Suspense
						fallback={
							<div
								role="status"
								className="h-full p-3 relative w-full bg-content1 rounded-lg animate-pulse dark:bg-content1"
							>
								<div class="flex items-center justify-center w-full h-full bg-primary-200 rounded dark:bg-primary-100">
									<svg
										class="w-10 h-10 text-gray-200 dark:text-gray-600"
										aria-hidden="true"
										xmlns="http://www.w3.org/2000/svg"
										fill="currentColor"
										viewBox="0 0 20 18"
									>
										<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
									</svg>
								</div>
								<span className="sr-only">Loading...</span>
							</div>
						}
					>
						<Image
							src={post.coverUrl}
							priority
							alt="cover"
							fill
							sizes="(max-width: 768px) 100vw,
						(max-width: 1200px) 50vw,
						33vw"
							quality={100}
						/>
					</Suspense>
				</CoverWrapper>
				<Suspense
					fallback={
						<div role="status" class="max-w animate-pulse">
							<div class="h-6 bg-default-100 rounded-full dark:bg-default-100 w-48 mb-6"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[65%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[95%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[85%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[95%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[35%] mb-5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[95%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[95%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[95%] mb-2.5"></div>
							<div class="h-3 bg-default-100 rounded-full dark:bg-default-100 max-w-[45%] mb-2.5"></div>
							<span class="sr-only">Loading...</span>
						</div>
					}
				>
					<MDXRemote components={{ ...components }} source={markdown} />
				</Suspense>
			</Article>
		</div>
	);
}

[areknawo]

Thanks so much for this! Very helpful, especially with the next-mdx-remote integration.

Some questions/suggestions from my side:

• Why build a custom API with a route handler and not "inline" the fetching inside server components (or inside a dedicated data fetching function)?
• Does Suspense work as intended, given that it doesn't wrap any the data-fetching RSC from what I can tell? Shouldn't it be, e.g.:

// blog/[slug]/page.js
<Article>
  <Suspense fallback={...}>
    {/* Inside BlogId: fetch content, use MDXRemote, etc. */}
    <BlogId {...} />
  </Suspense>
</Article>

• Suggestion: Vrite has Variants for handling i18n content. You can use those instead of separate content groups. That said, it's on me to document it better. 😄

[sFritsch09]

That's nice input, I will check out the i18n Variants :)

For the first question, this is a convenient Next 14 approach to put your API calls into the backend of Next in app/api. There is a great feature where you can cache your API calls. Let's say you have a button where you make an API call and a stupid user clicks it many times, then the call will be made only once!

For Suspense, you can also do it like you propose. Inside the server component just needs to be a Supsense wrapper for every client side component. This is also for the future feature called Partial Prerendering (PPR): https://nextjs.org/blog/next-14#partial-prerendering-preview

[areknawo]

That makes sense. Thanks for the answers and again for the code - will make use of it hopefully soon.