Add API Routes starter

2026-06-11 09:51:47 +00:00 · 2020-04-02 20:21:12 -07:00
parent 57f7967936
commit 2a4e1b13e6
22 changed files with 428 additions and 42 deletions
--- a/api-routes-starter/.gitignore
+++ b/api-routes-starter/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/api-routes-starter/README.md
+++ b/api-routes-starter/README.md
@@ -0,0 +1 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).
--- a/api-routes-starter/components/Date.js
+++ b/api-routes-starter/components/Date.js
@@ -0,0 +1,6 @@
+import { parseISO, format } from 'date-fns'
+
+export default function Date({ dateString }) {
+  const date = parseISO(dateString)
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+}
--- a/api-routes-starter/components/Layout.js
+++ b/api-routes-starter/components/Layout.js
@@ -0,0 +1,64 @@
+import Head from 'next/head'
+import styles from './Layout.module.css'
+import utilStyles from '../styles/utils.module.css'
+import Link from 'next/link'
+
+const name = '[Your Name]'
+export const siteTitle = 'Next.js Sample Website'
+
+const Page = ({ children, home }) => (
+  <div className={styles.container}>
+    <Head>
+      <link rel="icon" href="/favicon.ico" />
+      <meta
+        name="description"
+        content="Learn how to build a personal website using Next.js"
+      />
+      <meta
+        property="og:image"
+        content={`https://og-image.now.sh/${encodeURI(
+          siteTitle
+        )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
+      />
+    </Head>
+    <header className={styles.header}>
+      {home ? (
+        <>
+          <img
+            src="/images/profile.jpg"
+            className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
+            alt={name}
+          />
+          <h1 className={utilStyles.heading2Xl}>{name}</h1>
+        </>
+      ) : (
+        <>
+          <Link href="/">
+            <a>
+              <img
+                src="/images/profile.jpg"
+                className={`${styles.headerImage} ${utilStyles.borderCircle}`}
+                alt={name}
+              />
+            </a>
+          </Link>
+          <h2 className={utilStyles.headingLg}>
+            <Link href="/">
+              <a className={utilStyles.colorInherit}>{name}</a>
+            </Link>
+          </h2>
+        </>
+      )}
+    </header>
+    <main>{children}</main>
+    {!home && (
+      <div className={styles.backToHome}>
+        <Link href="/">
+          <a>← Back to home</a>
+        </Link>
+      </div>
+    )}
+  </div>
+)
+
+export default Page
--- a/api-routes-starter/components/Layout.module.css
+++ b/api-routes-starter/components/Layout.module.css
@@ -0,0 +1,25 @@
+.container {
+  max-width: 36rem;
+  padding: 0 1rem;
+  margin: 3rem auto 6rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headerImage {
+  width: 6rem;
+  height: 6rem;
+}
+
+.headerHomeImage {
+  width: 8rem;
+  height: 8rem;
+}
+
+.backToHome {
+  margin: 3rem 0 0;
+}
--- a/api-routes-starter/lib/posts.js
+++ b/api-routes-starter/lib/posts.js
@@ -0,0 +1,69 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+import remark from 'remark'
+import html from 'remark-html'
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+
+export function getSortedPostsData() {
+  // Get file names under /posts
+  const fileNames = fs.readdirSync(postsDirectory)
+  const allPostsData = fileNames.map(fileName => {
+    // Remove ".md" from file name to get id
+    const id = fileName.replace(/\.md$/, '')
+
+    // Read markdown file as string
+    const fullPath = path.join(postsDirectory, fileName)
+    const fileContents = fs.readFileSync(fullPath, 'utf8')
+
+    // Use gray-matter to parse the post metadata section
+    const { data } = matter(fileContents)
+
+    // Combine the data with the id
+    return {
+      id,
+      ...data
+    }
+  })
+  // Sort posts by date
+  return allPostsData.sort((a, b) => {
+    if (a.date < b.date) {
+      return 1
+    } else {
+      return -1
+    }
+  })
+}
+
+export function getAllPostIds() {
+  const fileNames = fs.readdirSync(postsDirectory)
+  return fileNames.map(fileName => {
+    return {
+      params: {
+        id: fileName.replace(/\.md$/, '')
+      }
+    }
+  })
+}
+
+export async function getPostData(id) {
+  const fullPath = path.join(postsDirectory, `${id}.md`)
+  const fileContents = fs.readFileSync(fullPath, 'utf8')
+
+  // Use gray-matter to parse the post metadata section
+  const { data, content } = matter(fileContents)
+
+  // Use remark to convert markdown into HTML string
+  const processedContent = await remark()
+    .use(html)
+    .process(content)
+  const contentHtml = processedContent.toString()
+
+  // Combine the data with the id and contentHtml
+  return {
+    id,
+    contentHtml,
+    ...data
+  }
+}
--- a/api-routes-starter/package.json
+++ b/api-routes-starter/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "date-fns": "^2.11.1",
+    "gray-matter": "^4.0.2",
+    "next": "9.3.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "remark": "^12.0.0",
+    "remark-html": "^11.0.1"
+  }
+}
--- a/api-routes-starter/pages/_app.js
+++ b/api-routes-starter/pages/_app.js
@@ -0,0 +1,5 @@
+import '../styles/global.css'
+
+const App = ({ Component, pageProps }) => <Component {...pageProps} />
+
+export default App
--- a/api-routes-starter/pages/index.js
+++ b/api-routes-starter/pages/index.js
@@ -0,0 +1,54 @@
+import Head from 'next/head'
+import Layout, { siteTitle } from '../components/Layout'
+import utilStyles from '../styles/utils.module.css'
+import { getSortedPostsData } from '../lib/posts'
+import Link from 'next/link'
+import Date from '../components/Date'
+
+const Home = ({ allPostsData }) => (
+  <Layout home>
+    <Head>
+      <title>{siteTitle}</title>
+    </Head>
+    <section className={utilStyles.headingMd}>
+      <p>
+        Hello, I’m <strong>Shu</strong>. I write code at{' '}
+        <a href="https://zeit.co">ZEIT</a>, the team behind{' '}
+        <a href="https://nextjs.org/">Next.js</a>. You can contact me via{' '}
+        <a href="https://twitter.com/chibicode">Twitter</a> or{' '}
+        <a href="mailto:chibicode@zeit.co">email</a>.
+      </p>
+      <p>
+        (This is a sample website - you’ll be building a site like this on{' '}
+        <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
+      </p>
+    </section>
+    <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
+      <h2 className={utilStyles.headingLg}>Blog</h2>
+      <ul className={utilStyles.list}>
+        {allPostsData.map(({ id, date, title }) => (
+          <li className={utilStyles.listItem}>
+            <Link href="/posts/[id]" as={`/posts/${id}`}>
+              <a>{title}</a>
+            </Link>
+            <br />
+            <small className={utilStyles.lightText}>
+              <Date dateString={date} />
+            </small>
+          </li>
+        ))}
+      </ul>
+    </section>
+  </Layout>
+)
+
+export async function getStaticProps() {
+  const allPostsData = getSortedPostsData()
+  return {
+    props: {
+      allPostsData
+    }
+  }
+}
+
+export default Home
--- a/api-routes-starter/pages/posts/[id].js
+++ b/api-routes-starter/pages/posts/[id].js
@@ -0,0 +1,39 @@
+import Layout from '../../components/Layout'
+import { getAllPostIds, getPostData } from '../../lib/posts'
+import Head from 'next/head'
+import Date from '../../components/Date'
+import utilStyles from '../../styles/utils.module.css'
+
+const Post = ({ postData }) => (
+  <Layout>
+    <Head>
+      <title>{postData.title}</title>
+    </Head>
+    <article>
+      <h1 className={utilStyles.headingXl}>{postData.title}</h1>
+      <div className={utilStyles.lightText}>
+        <Date dateString={postData.date} />
+      </div>
+      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
+    </article>
+  </Layout>
+)
+
+export async function getStaticPaths() {
+  const paths = getAllPostIds()
+  return {
+    paths,
+    fallback: false
+  }
+}
+
+export async function getStaticProps({ params }) {
+  const postData = await getPostData(params.id)
+  return {
+    props: {
+      postData
+    }
+  }
+}
+
+export default Post
--- a/api-routes-starter/posts/dps.md
+++ b/api-routes-starter/posts/dps.md
@@ -0,0 +1,12 @@
+---
+title: "DPS: Develop, Preview, Ship"
+date: "2020-01-02"
+---
+
+[ZEIT Now](https://zeit.co/) supports the **DPS** workflow: **D**evelop, **P**review, and **S**hip:
+
+- **Develop**: Write code in Next.js. Keep the development server running and take advantage of its hot code reloading feature.
+- **Preview**: Every time you push changes to a branch on GitHub / GitLab / BitBucket, ZEIT Now automatically creates a new deployment with a unique URL.
+- **Ship**: When you’re ready to ship, merge the pull request to your default branch (e.g. `master`). ZEIT Now will automatically create a production deployment.
+
+By using the DPS workflow, in addition to doing code reviews, you can do *deployment previews*. Each deployment creates a unique URL that can be shared or used for integration tests.
--- a/api-routes-starter/posts/pre-rendering.md
+++ b/api-routes-starter/posts/pre-rendering.md
@@ -0,0 +1,11 @@
+---
+title: "Two Forms of Pre-rendering"
+date: "2020-01-01"
+---
+
+[Next.js](https://nextjs.org/) has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
+
+- **Static Generation (Recommended)**: The HTML is generated at **build time** and will be reused on each request.
+- **Server-side Rendering**: The HTML is generated on **each request**.
+
+Importantly, Next.js lets you **choose** which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
--- a/api-routes-starter/public/favicon.ico
+++ b/api-routes-starter/public/favicon.ico
--- a/api-routes-starter/public/images/profile.jpg
+++ b/api-routes-starter/public/images/profile.jpg
--- a/api-routes-starter/styles/global.css
+++ b/api-routes-starter/styles/global.css
@@ -0,0 +1,27 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  line-height: 1.6;
+  font-size: 18px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
--- a/api-routes-starter/styles/utils.module.css
+++ b/api-routes-starter/styles/utils.module.css
@@ -0,0 +1,52 @@
+.heading2Xl {
+  font-size: 2.5rem;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: -0.05rem;
+  margin: 1rem 0;
+}
+
+.headingXl {
+  font-size: 2rem;
+  line-height: 1.3;
+  font-weight: 800;
+  letter-spacing: -0.05rem;
+  margin: 1rem 0;
+}
+
+.headingLg {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  margin: 1rem 0;
+}
+
+.headingMd {
+  font-size: 1.2rem;
+  line-height: 1.5;
+}
+
+.borderCircle {
+  border-radius: 9999px;
+}
+
+.colorInherit {
+  color: inherit;
+}
+
+.padding1px {
+  padding-top: 1px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.listItem {
+  margin: 0 0 1.25rem;
+}
+
+.lightText {
+  color: #999;
+}
--- a/data-fetching-starter/styles/utils.module.css
+++ b/data-fetching-starter/styles/utils.module.css
@@ -6,6 +6,14 @@
  margin: 1rem 0;
 }

+.headingXl {
+  font-size: 2rem;
+  line-height: 1.3;
+  font-weight: 800;
+  letter-spacing: -0.05rem;
+  margin: 1rem 0;
+}
+
 .headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
--- a/dynamic-routes-starter/README.md
+++ b/dynamic-routes-starter/README.md
@@ -1,30 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on ZEIT Now
-
-The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).
--- a/dynamic-routes-starter/components/Layout.js
+++ b/dynamic-routes-starter/components/Layout.js
@@ -3,7 +3,7 @@ import styles from './Layout.module.css'
 import utilStyles from '../styles/utils.module.css'
 import Link from 'next/link'

-const name = 'Shu Uesugi'
+const name = '[Your Name]'
 export const siteTitle = 'Next.js Sample Website'

 const Page = ({ children, home }) => (
--- a/dynamic-routes-starter/pages/index.js
+++ b/dynamic-routes-starter/pages/index.js
@@ -9,17 +9,7 @@ const Home = ({ allPostsData }) => (
      <title>{siteTitle}</title>
    </Head>
    <section className={utilStyles.headingMd}>
-      <p>
-        Hello, I’m <strong>Shu</strong>. I write code at{' '}
-        <a href="https://zeit.co">ZEIT</a>, the team behind{' '}
-        <a href="https://nextjs.org/">Next.js</a>. You can contact me via{' '}
-        <a href="https://twitter.com/chibicode">Twitter</a> or{' '}
-        <a href="mailto:chibicode@zeit.co">email</a>.
-      </p>
-      <p>
-        (This is a sample website - you’ll be building a site like this on{' '}
-        <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
-      </p>
+      <p>[Your Self Introduction]</p>
    </section>
    <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
      <h2 className={utilStyles.headingLg}>Blog</h2>
--- a/dynamic-routes-starter/public/images/profile.jpg
+++ b/dynamic-routes-starter/public/images/profile.jpg
--- a/dynamic-routes-starter/styles/utils.module.css
+++ b/dynamic-routes-starter/styles/utils.module.css
@@ -6,6 +6,14 @@
  margin: 1rem 0;
 }

+.headingXl {
+  font-size: 2rem;
+  line-height: 1.3;
+  font-weight: 800;
+  letter-spacing: -0.05rem;
+  margin: 1rem 0;
+}
+
 .headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
				`@@ -0,0 +1 @@`
				`This is a starter template for [Learn Next.js](https://nextjs.org/learn).`