テンプレートプロジェクトを作成

apps/vercel/src/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.next/
+.DS_STORE
+.env

apps/vercel/src/README.md

@@ -0,0 +1,3 @@
+# Fullstack Authentication Example with Next.js and NextAuth.js
+
+This is the starter project for the fullstack tutorial with Next.js and Prisma. You can find the final version of this project in the [`final`](https://github.com/prisma/blogr-nextjs-prisma/tree/final) branch of this repo.

apps/vercel/src/components/Header.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+const Header: React.FC = () => {
+  const router = useRouter();
+  const isActive: (pathname: string) => boolean = (pathname) =>
+    router.pathname === pathname;
+
+  let left = (
+    <div className="left">
+      <Link href="/">
+        <a className="bold" data-active={isActive("/")}>
+          Feed
+        </a>
+      </Link>
+      <style jsx>{`
+        .bold {
+          font-weight: bold;
+        }
+
+        a {
+          text-decoration: none;
+          color: #000;
+          display: inline-block;
+        }
+
+        .left a[data-active="true"] {
+          color: gray;
+        }
+
+        a + a {
+          margin-left: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+
+  let right = null;
+
+  return (
+    <nav>
+      {left}
+      {right}
+      <style jsx>{`
+        nav {
+          display: flex;
+          padding: 2rem;
+          align-items: center;
+        }
+      `}</style>
+    </nav>
+  );
+};
+
+export default Header;

apps/vercel/src/components/Layout.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from "react";
+import Header from "./Header";
+
+type Props = {
+  children: ReactNode;
+};
+
+const Layout: React.FC<Props> = (props) => (
+  <div>
+    <Header />
+    <div className="layout">{props.children}</div>
+    <style jsx global>{`
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        font-size: 16px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      input,
+      textarea {
+        font-size: 16px;
+      }
+
+      button {
+        cursor: pointer;
+      }
+    `}</style>
+    <style jsx>{`
+      .layout {
+        padding: 0 2rem;
+      }
+    `}</style>
+  </div>
+);
+
+export default Layout;

apps/vercel/src/components/Post.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Router from "next/router";
+import ReactMarkdown from "react-markdown";
+
+export type PostProps = {
+  id: string;
+  title: string;
+  author: {
+    name: string;
+    email: string;
+  } | null;
+  content: string;
+  published: boolean;
+};
+
+const Post: React.FC<{ post: PostProps }> = ({ post }) => {
+  const authorName = post.author ? post.author.name : "Unknown author";
+  return (
+    <div onClick={() => Router.push("/p/[id]", `/p/${post.id}`)}>
+      <h2>{post.title}</h2>
+      <small>By {authorName}</small>
+      <ReactMarkdown children={post.content} />
+      <style jsx>{`
+        div {
+          color: inherit;
+          padding: 2rem;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Post;

apps/vercel/src/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.