Skip to content

weicheng2138/next-notion-boilerplate

Repository files navigation

This is a Next.js project bootstrapped with create-next-app.

Dev Issues

  • Deal with the server console to browser console issue
  • Notion API ans types
  • Usability of the react-notion-x. There no one mantaining the project and it's not working properly.
  • i18n with Minimal i18n routing and translations

Notion API

Setup

  1. Create a new integration in Notion from here
  2. After creating the integration, you will get the Integration Secret which you will use to authenticate your requests.
  3. Click show to get the secret and copy it, which is something like secret_....
  4. Create a new database in Notion and add some posts in it.
  5. Press the ... button on the top right corner of the database and click on Connect to and click the integration name you created.
  6. Copy the Database ID from the URL of the database, which is something like https://www.notion.so/...?v=123123123 and the ... is the Database ID.
  7. Create a new .env.local file in the root of the project and add the following environment variables:
    NOTION_API_SECRET=secret_...
    NOTION_DATABASE_ID=...
  8. Install the @notionhq/client official package by running:
    pnpm add @notionhq/client
  9. Notion Page template Notion Page template

Usage

  1. type guards is working for all types of notion objects
  2. If the block is a database, the block id is the database id
  3. .env.local NOTION_DATABASE_ID is the entry point of notion database. This is a page with two inline databases with two locales.
  4. When upload files, the url will expire in one hour. You can see the link for further information.
## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

next dev --turbo is not working properly. It's not updating the page when its not-found.

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.