Notion Block Renderer with Next.js SSR and Static Generation

Rich text

Text

Bold, Italicize, Underline, Link, code , break, s p a c i ng,

Color Text

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Background Text

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Inline Equation

$E = mc²$

$F = ma$

$F = G * (m₁ * m₂) / r²$

Emojis

Basic Blocks

Paragraph

Paragraph

purple color Paragraph

purple background Paragraph

Heading Blocks

Heading 1

pink color Heading 1

pink Background Heading 1

Heading 2

Heading 3

Bulleted list

• Boil fresh water
• Add coffee grounds to your filter or French press
• Pour hot water over the coffee
• Let it brew (about 4 minutes for French press)

Numbered list

1. 1.a.i.

   Boil fresh water
2. 2.b.ii.

   Add coffee grounds to your filter or French press
3. 3.c.iii.

   Pour hot water over the coffee
4. 4.d.iv.

   Let it brew (about 4 minutes for French press)
5. 5.e.v.

   Press or filter the coffee
6. 6.f.vi.

   Pour into your favorite mug
7. 7.g.vii.

   Add milk or sugar if desired
8. 8.h.viii.

   Enjoy your coffee break!

To-do

• To-do item (unchecked)

• To-do item (checked)

• color to do (checked)

• background to do (checked)

• green color

• blue color

• purple color

• pink color

• red color

• default color

• gray color

• brown color

Toggle

• Toggle

  hi share this template

• Toggle block with no nested blocks ( Appears with a faded toggle icon )

• Toggle Block with Background

  If a background is applied to the toggle block, all nested blocks will inherit that background, unless a specific background is set on a nested block or rich text.

• Toggle Block with Color

  Similarly, if a color is applied to the toggle block, all nested content will inherit that color — unless a nested block or text span has its own color applied.

Callout

Callout

Gray text

Purple

Pink

Red

Callout without Icon

Callout with nested blocks including callout text

Callout with only nested blocks

Heading 1

Heading 2

Heading 3

paragraph

Callout block in callout block

Quote

Quote of the day!

brown color

brown background

Quote with nested blocks

To be or not to be, that is the question.

— William Shakespeare

Quote with nested blocks

Heading 1 inside Quote

Some supporting paragraph text.

• A bullet list item
• Another one

Even a nested quote block!

Quote Text Color

Stay hungry, stay foolish.

(The left border color of the quote block inherits from the block’s text color.)

Table

Table with Heading Row

Table with Heading Column

Table with Both Headings

Table Without Heading Row or Heading Column

Large overflow Table

Table Blocks in Column

Divider

Link to page

Blog

Insights, tutorials, and tips on web development

November 6, 2025

Designing a Personal Website That Actually Converts ( First blog )

Learn how to design a personal website that communicates value clearly, builds trust, and converts visitors into clients or followers through structure, content, and visual clarity.

January 29, 2026

Media Blocks

Image

Uploaded File Images via Notion

Unsplash Notion image URL

Video

YouTube Videos

Facebook Video

Audio

Code

Code block with with notion rich text

export default function Page() {
  return <div>Page</div>;
}
 Bold, Italicize, Underline, Link, code ,     break,    s     p   a  c i ng,$F = G * (m₁ * m₂) / r²$Notion as a CMS

JavaScript code block

function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; }

// Example usage:
const fetchData = () => { console.log("Fetching data..."); };

const debouncedFetch = debounce(fetchData, 1000);

document.getElementById("search").addEventListener("input", debouncedFetch);
  

File

Web Bookmark

The AI workspace that works for you. | Notion

Build custom agents, search across all your apps, and automate busywork. The AI workspace where teams get more done, faster.

https://www.notion.com/

Notion CMS Next.js Portfolio Blog Template

Portfolio/blog template where Notion is used as a headless CMS, enabling full control of pages, routes, SEO, Open Graphs, header/footer links, social links, favicon, and sitemap.

https://www.sujalvanjare.com/templates/notion-cms-nextjs/portfolio-blog

Advanced Blocks

Table of contents

Block equation

Pythagorean Theorem

$$a^2 + b^2 = c^2$$

Quadratic Formula

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}🔨$$

Breadcrumb

Jared Lin

Notion Block Renderer with Next.js SSR and Static Generation

Synced block

Synced from “First blog post”

This is a demo blog post used to show how blog pages look in this portfolio template.

You can replace this content with your own blog.

Columns

2 Columns

3 Columns with Custom Widths

4 Columns

5 Columns

Nested columns? Yes! You can even place a Columns block inside a column, just like Notion allows.

Code - Mermaid

flowchart LR
    id1>This is the text in the box]

%% A simple Mermaid diagram
graph TD;
    A[Hello, World!] --> B{Sum};
    B -->|5| C[5];
    B -->|10| D[10];
    C --> E[Result];
    D --> E;

Embed

X Post (Tweet)

Instagram

Figma

Pinterest

Facebook

Facebook Post

Facebook Reels

Facebook Video

PDF

Spotify

CodePen

CodeSandbox

Gist from GitHub

Google Maps

Google Form Embed

Mention inline

Mention Page

Designing a Personal Website That Actually Converts ( First blog )

Mention a Link

Default link mention

www.sujalvanjare.com

vercelNext.js by Vercel - The React Framework

NotionThe AI workspace that works for you. | Notion

Unsplash Image mention

images.unsplash.com

YouTube Video mention

@braindamageOST GOBLIN Full Album 孤單又燦爛的神－鬼怪

marcosmusicAndré Gagnon - Comme au premier jour This video starts at 0:16

Tweet embed mention

Sujal VanjareSujal Vanjare on Twitter / X

Mention a Date

@January 27, 2026 → January 28, 2026 with end date

@January 26, 2026 with only start date

@December 1, 2025 with only start date with relative date type change

@July 31, 2025 6:30 PM (GMT+5) with time

@July 31, 2025 3:00 PM (GMT+9) with time zone

@July 17, 2025 today mention

@July 17, 2026 → July 31, 2026

@July 18, 2025 3:30 AM (GMT+5) remind me tomorrow

Mention a User

@Sujal Vanjare