rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-07-08 14:35:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add API Routes starter

Browse Source
This commit is contained in:
Shu Uesugi
2020-04-02 20:21:12 -07:00
parent 57f7967936
commit 2a4e1b13e6
22 changed files with 428 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
api-routes-starter/.gitignore vendored Normal file
View File

@@ -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*

1
api-routes-starter/README.md Normal file
View File

@@ -0,0 +1 @@
This is a starter template for [Learn Next.js](https://nextjs.org/learn).

6
api-routes-starter/components/Date.js Normal file
View File

@@ -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>
}

64
api-routes-starter/components/Layout.js Normal file
View File

@@ -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

25
api-routes-starter/components/Layout.module.css Normal file
View File

@@ -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;
}

69
api-routes-starter/lib/posts.js Normal file
View File

@@ -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
}
}

19
api-routes-starter/package.json Normal file
View File

@@ -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"
}
}

5
api-routes-starter/pages/_app.js Normal file
View File

@@ -0,0 +1,5 @@
import '../styles/global.css'
const App = ({ Component, pageProps }) => <Component {...pageProps} />
export default App

54
api-routes-starter/pages/index.js Normal file
View File

@@ -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

39
api-routes-starter/pages/posts/[id].js Normal file
View File

@@ -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

12
api-routes-starter/posts/dps.md Normal file
View File

@@ -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.

11
api-routes-starter/posts/pre-rendering.md Normal file
View File

@@ -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.

BIN
api-routes-starter/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
api-routes-starter/public/images/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

27
api-routes-starter/styles/global.css Normal file
View File

@@ -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;
}

52
api-routes-starter/styles/utils.module.css Normal file
View File

@@ -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;
}

8
data-fetching-starter/styles/utils.module.css
View File

@@ -6,6 +6,14 @@
margin: 1rem 0; margin: 1rem 0;
} }
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg { .headingLg {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.4; line-height: 1.4;

31
dynamic-routes-starter/README.md
View File

@@ -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). This is a starter template for [Learn Next.js](https://nextjs.org/learn).
## 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.

2
dynamic-routes-starter/components/Layout.js
View File

@@ -3,7 +3,7 @@ import styles from './Layout.module.css'
import utilStyles from '../styles/utils.module.css' import utilStyles from '../styles/utils.module.css'
import Link from 'next/link' import Link from 'next/link'
const name = 'Shu Uesugi' const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website' export const siteTitle = 'Next.js Sample Website'
const Page = ({ children, home }) => ( const Page = ({ children, home }) => (

12
dynamic-routes-starter/pages/index.js
View File

@@ -9,17 +9,7 @@ const Home = ({ allPostsData }) => (
<title>{siteTitle}</title> <title>{siteTitle}</title>
</Head> </Head>
<section className={utilStyles.headingMd}> <section className={utilStyles.headingMd}>
<p> <p>[Your Self Introduction]</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>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}> <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2> <h2 className={utilStyles.headingLg}>Blog</h2>

BIN
dynamic-routes-starter/public/images/profile.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 61 KiB

8
dynamic-routes-starter/styles/utils.module.css
View File

@@ -6,6 +6,14 @@
margin: 1rem 0; margin: 1rem 0;
} }
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg { .headingLg {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.4; line-height: 1.4;