Add example

2026-06-26 06:06:03 +00:00 · 2020-04-02 22:59:13 -07:00
parent 2a4e1b13e6
commit b20c3b504f
19 changed files with 417 additions and 8 deletions
--- a/example/pages/_app.js
+++ b/example/pages/_app.js
@@ -0,0 +1,5 @@
+import '../styles/global.css'
+
+const App = ({ Component, pageProps }) => <Component {...pageProps} />
+
+export default App
--- a/example/pages/api/hello.js
+++ b/example/pages/api/hello.js
@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.status(200).json({ text: 'Hello' })
+}
--- a/example/pages/index.js
+++ b/example/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/example/pages/posts/[id].js
+++ b/example/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