feat: 亮色暗色模式切换。

pages/articles/[id].tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+import styles from "./article.module.css";
+import { GetServerSideProps, GetStaticProps } from "next";
+import { addApolloState, initializeApollo } from "../../commons/graphql/client";
+import { ARTICLE } from "../../commons/graphql/queries";
+import { Article } from "../../commons/graphql/generated";
+import { useQuery } from '@apollo/client';
+import { useRouter } from 'next/router';
+
+interface Props {
+  article: Article;
+}
+const ArticleDetails: FC<Props> = ({ article }) => {
+  // const router = useRouter()
+  // const { data } = useQuery<{ article: Article }>(ARTICLE, {
+  //   variables: router.query,
+  // });
+  return (
+    <main className={styles.articleDetails}>
+      <h1>{article.title}</h1>
+    </main>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const apolloClient = initializeApollo();
+
+  const { data } = await apolloClient.query<{ article: Article }>({
+    query: ARTICLE,
+    variables: params,
+  });
+
+  return addApolloState(apolloClient, {
+    props: { article: data.article },
+  });
+};
+
+export default ArticleDetails;