Next.js Notion Starter Kit

The perfect starter kit for building websites with Next.js and Notion.

Intro

原作者的网站transitivebullsh.it.

搭建该网站用的所有代码都在github中。

本repo是在原作者的基础上，进行修改得到的。

原作者使用了react-notion-x, Next.js, Vercel.

特点

• 几分钟就能完成配置 (只有一个配置未见) 💪
• Robust support for Notion content via react-notion-x
• Next.js / TS / React / Notion
• 页面速度快
• 丝滑的图片预览
• Automatic pretty URLs
• Automatic table of contents
• 支持夜间模式
• Quick search via CMD+K / CMD+P
• Responsive for different devices
• Optimized for Next.js and Vercel

Demos

• Default demo - Deployed from the main branch
• My site - Deployed from the transitive-bullshit branch

设置

所有的配置文件都在这里面： site.config.js.

1. Fork / clone this repo
2. 更改这个文件里的几个值 site.config.js
3. npm install
4. npm run dev to test locally
5. npm run deploy to deploy to vercel 💪

原作者的readme写得很易读.

最重要的、必须要改的是 rootNotionPageId. 默认值指向原作者的notion的页面ID78fc5a4b88d74b0e824e29407e9f1ec1.

You'll want to make your root Notion page public and then copy the link to your clipboard. Then extract the last part of the URL that looks like d1b5dcf8b9ff425b8aef5ce6f0730202, which is your page's Notion iD.

如何寻找自己的 Notion workspace ID (optional)：just load any of your site's pages into your browser and open up the developer console. There will be a global variable that you can access called block which is the Notion data for the current page. If you enter block.space_id, it will print out your page's workspace ID.

推荐使用的notion模版：像这样的gallery here) that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion.

URL Paths

The app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).

In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.

In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.

The mapping of Notion ID to slugified page titles is done automatically as part of the build process. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don't currently provide a solution for detecting old links aside from Next.js's built-in support for redirects.

See mapPageUrl and getCanonicalPageId for more details.

NOTE: 会报错的情况，if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames.

预览图片

We use next/image to serve images efficiently, with preview images optionally generated via lqip-modern. This gives us extremely optimized image support for sexy smooth images.

Preview images are enabled by default, but they can be slow to generate, so if you want to disable them, set isPreviewImageSupportEnabled to false in site.config.js.

If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external Redis data store. To enable redis caching, set isRedisEnabled to true in site.config.js and then set REDIS_HOST and REDIS_PASSWORD environment variables to point to your redis instance.

You can do this locally by adding a .env file:

REDIS_HOST='TODO'
REDIS_PASSWORD='TODO'

Note that preview images and redis caching are both optional features. If you’d rather not deal with them, just disable them in your site config.

样式Styles

所有关于Notion内容的CSS样式都在文件styles/notion.css中。 All CSS styles that customize Notion content are located in styles/notion.css. They mainly target global CSS classes exported by react-notion-x styles.css.

Every notion block gets its own unique classname, so you can target individual blocks like this:

.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
  display: none;
}

夜间模式Dark Mode

       

通过页面底部的🌞/🌛来调节。

自动生成文件的目录

By default, every article page will have a table of contents displayed as an aside on desktop. It uses scrollspy logic to automatically update the current section as the user scrolls through your document, and makes it really easy to jump between different sections.

不显示table的情况： 1.If a page has less than minTableOfContentsItems (default 3), the table of contents will be hidden. 2. It is also hidden on the index page 3. if the browser window is too small.

This table of contents uses the same logic that Notion uses for its built-in Table of Contents block (see getPageTableOfContents for the underlying logic).

响应式Responsive

所有的页面都可以在各种设备上灵活显示.

Fathom Analytics

Fathom provides a lightweight alternative to Google Analytics.

To enable analytics, just add a NEXT_PUBLIC_FATHOM_ID environment variable, which will only be used in production.

Note that this feature is completely optional.

贡献

See the contribution guide and join our amazing list of contributors!

License

MIT © Travis Fischer

Support my open source work by following me on twitter