使用Nextjs、Github Gists创建阅读观影纪录应用
前言
重新开发部署博客到后深刻地体会到 Nextjs 这个 react 元框架的优秀之处，于是就基于 Nextjs 创建一个简单的应用用于记录自己的读书观影记录
JAMStack
使用 Nextjs、使用 Github Gists 作为数据来源，使用 windicss 简化应用样式
比较简单的实现了一个JAMStack 结构
创建 Nextjs 应用
Next 官方并没有一个 windicss 的模板，我们直接从零开始构建一个项目
创建项目文件夹
mkdir records
cd records
初始化项目
pnpm init
git init #或许可选?
安装依赖
pnpm add next react react-dom @octokit/core
pnpm add -D @types/node @types/react @types/react-dom typescript windicss windicss-webpack-plugin
其中 @octokit/core是 github 官方 api 的 js client,我们通过这个包来获取 Github Gists 的内容来生成页面
在package.json中新增一个 script
{
...
"scripts":{
+ "dev":"next",
}
}
配置 windicss
在项目根目录下新建next.config.js
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
/** @type {import('next').NextConfig} */
const config = {
webpack(config) {
config.plugins.push(new WindiCSSWebpackPlugin());
return config;
}
};
module.exports = config;
然后我们新建一个 pages 目录用于放置 nextjs 基于约定的路由页面, 里面新建_app.tsx文件
在顶端引入import 'windi.css'并自定义 App
import "windi.css";
import { AppProps } from "next/app";
import { ThemeProvider } from "next-themes";
import Head from "next/head";
const App: React.FC<AppProps> = ({ Component, pageProps }) => {
return (
<ThemeProvider attribute="class" defaultTheme="system">
<Head>
<title>我看过的</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</Head>
<Component {...pageProps}></Component>
</ThemeProvider>
);
};
export default App;
创建页面
在 pages/下新建一个index.tsx,这是应用的根页面,我们先创建一个空页面
const Home: React.FC<Props> = ({ records }) => {
return <div></div>
};
export default Home;
创建组件
我们需要一个卡片组件用于展示记录的信息,新建一个components/card.tsx简单的设置下卡片样式
const Card: React.FC = () => {
return (
<section className="pb-10 relative before:border-l-2 before:inset-y-0 before:-left-30px before:absolute before:content-open-quote first:before:top-1 last:before:bottom-10">
content
</section>
);
};
export default Card;
然后我们先定义一个 interface 用于描述记录的信息,顺便导出一下
export interface RecordItem {
/** 名称 */
title: string
/** 分类 */
type: 'anime' | 'book' | 'tv' | 'movie'
/** 发布年份 */
year: number
/** 封面图片url */
cover: string
/** 评分 */
score: 1 | 2 | 3 | 4 | 5
/** 观看日期 */
date: string
/** 评论 */
comment: string
}
然后我们借助这个类型将组件完善一下,其中使用 next/image 来图片优化
如果选择 SSG 的话,可以直接使用 img 标签以及把对应的图片资源放在 public 下做静态文件服务或者使用图床链接如果准备托管到 Vercel 就直接使用 Image 组件
import Image from "next/image";
import { useState } from "react";
export interface RecordItem {
/** 名称 */
title: string
/** 分类 */
type: 'anime' | 'book' | 'tv' | 'movie'
/** 发布年份 */
year: number
/** 封面图片url */
cover: string
/** 评分 */
score: 1 | 2 | 3 | 4 | 5
/** 观看日期 */
date: string
/** 评论 */
comment: string
}
const Score: React.FC<Pick<RecordItem, "score">> = ({ score }) => {
switch (score) {
case 1:
return <big className="font-bold text-gray-500">🍅 烂</big>;
case 2:
return <big className="font-bold text-green-500">🥱 无聊</big>;
case 3:
return <big className="font-bold text-blue-500">🤔 还行</big>;
case 4:
return <big className="font-bold text-violet-500">🤩 值得一看</big>;
case 5:
return <big className="font-bold text-orange-500">💯 神作！</big>;
}
};
const renderType = (type: RecordItem["type"]) => {
const typeMap = {
movie: "电影",
tv: "剧集",
book: "书籍",
anime: "动漫"
};
return typeMap[type] ?? "未知";
};
export const Card: React.FC<RecordItem> = (props) => {
const [loading, setLoading] = useState(true);
const loadingClasses =
"backdrop-filter backdrop-grayscale backdrop-blur-lg transform scale-110 hover:opacity-75 duration-300 ease-in-out";
const loadedClasses =
"backdrop-filter backdrop-grayscale-0 backdrop-blur-0 transform scale-100 hover:opacity-75 duration-300 ease-in-out";
const classes = loading ? loadingClasses : loadedClasses;
return (
<section className="pb-10 relative before:border-l-2 before:inset-y-0 before:-left-30px before:absolute before:content-open-quote first:before:top-1 last:before:bottom-10 ">
<p className="text-sm mb-2 relative sm:text-base sm:mb-3">
{new Date(props.date).toLocaleDateString()}
<i className="rounded-full bg-gray-200 h-4 transform top-1/2 -left-9 w-4 translate-y-[-50%] absolute" />
</p>
<div className="flex justify-between">
<div className="flex-1 mr-2">
<p className="text-md mb-2 leading-6 sm:mb-3 sm:text-2xl ">
{props.title}
<span>（{props.year}）</span>
</p>
<p className="text-base md:text-sm">
<span>评分：</span>
<Score score={props.score} />
</p>
<p className="text-base md:text-sm">
<span>分类：</span>
{renderType(props.type)}
</p>
<div className="mt-4 text-sm md:text-x text-gray-700 dark:text-gray-300">{props.comment}</div>
</div>
<div className="rounded-xl w-87px overflow-hidden md:rounded-md">
<Image
src={props.cover}
layout="fixed"
width={87}
height={116}
objectFit="cover"
alt={props.title}
className={classes}
onLoadingComplete={() => setLoading(false)}
/>
</div>
</div>
</section>
);
};
如果使用了 next/image 组件，我们需要修改一下 next.config.js 文件，添加图片域名配置,添加封面图片可能的域名
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
/** @type {import('next').NextConfig} */
const config = {
webpack(config) {
config.plugins.push(new WindiCSSWebpackPlugin());
return config;
},
images: {
domains: ["img1.doubanio.com", "img2.doubanio.com", "img3.doubanio.com", "img9.doubanio.com"]
}
};
module.exports = config;
然后可以在 pages/index.tsx 设置看看效果
import Card from 'components/Card.tsx'
const Home: React.FC<Props> = ({ records }) => {
return (
<div>
<Card
title="猎罪图鉴"
type="tv"
year={2022}
cover="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2647399331.webp"
score={4}
date="2022-04-02"
comment="国产刑侦剧，除了最后关于程序员的部分有点让从业者尴尬，总体感觉值得一看"
/>
</div>
)
};
export default Home;
设置和获取数据
首先我们以设定好的先新建一个 json 格式的 Gist,我们 gist 中每一个 file 就是一条记录按照设定的类型如下
{
"title": "猎罪图鉴",
"type": "tv",
"year": 2022,
"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2647399331.webp",
"score": 4,
"date": "2022-04-02",
"comment": "国产刑侦剧，除了最后关于程序员的部分有点让从业者尴尬，总体感觉值得一看"
}
如果想直接新建多条可以点击Add file,然后Create public gist或者Create private gist,
然后记住这条 Gist 的 id https://gist.github.com/enpitsuLin/<gist id>,新建一个.env文件，添加如下内容
GIST_ID=<gist id>
获取 token
如果你的 gist 是 private 的则需要新建 token,过期时间建议不过期,然后也在.env文件中添加如下内容
GIST_ID=<gist id>
GIT_TOKEN=<token>
当然这一部分建议不要上传至代码库，因为这样会导致你的 token 被泄露，如果使用 Vercel 托管就到 settings 里写入 Environment Variables
获取数据
新增lib/get-records.ts文件用于获取数据的逻辑
import { Octokit } from '@octokit/core'
const octokit = new Octokit({ auth: process.env.GIT_TOKEN })
export async function getRecords() {
const res = await octokit.request("GET /gists/{gist_id}", { gist_id: process.env.GIST_ID })
return res
}
这里有几种方法在页面中拿到数据,使用getStaticProps/getServerSideProps,或者在页面中使用 fetch 或者 xhr 获取数据并渲染推荐使用 swr
如果目的是创建一个静态页面的话只能使用getStaticProps或者在页面运行是的时候获取数据
如果是托管在 Vercel 之类的网站托管服务或者自己的服务器部署的话可以使用getServerSideProps
getStaticProps
使用 getStaticProps 则只能获取在每次构建的时候的数据,用于 ssg 最好但是数据不及时
import { Card } from "components/Crad";
import { GetStaticProps } from "next";
import { getRecords } from "lib/get-records";
import { RecordItem } from "types/records";
interface Props {
records: RecordItem[];
}
function filterTruthy<T>(x: T | false): x is T {
return Boolean(x);
}
export const getStaticProps: GetStaticProps<Props> = async () => {
const { data } = await getRecords();
const records = Object.keys(data.files)
.map((key) => {
try {
return JSON.parse(data.files[key].content) as RecordItem;
} catch (error) {
return false;
}
})
.filter(filterTruthy);
return {
props: {
records: records.sort((a, b) => {
return new Date(a.date) < new Date(b.date) ? 1 : -1;
})
}
};
};
const Home: React.FC<Props> = ({ records }) => {
return (
<div>
{records.map((record) => (
<Card {...record} key={record.title} />
))}
</div>
);
};
export default Home;
使用 getServerSideProps 的话则和 getStaticProps 基本一致但是需要托管在平台上或者自己部署
如果在运行时获取的话需要在useEffect中获取或者使用 swr 的useSWR,具体就不展示这两种用法了
优化样式
最后再美化一下页面布局然后可以增加多主题功能,还有列表懒加载之类的功能
效果
使用Nextjs、Github Gists创建阅读观影纪录应用
Author
enpitsulin
Posted on
Updated on