rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic routes starter

Browse Source
This commit is contained in:
Shu Uesugi
2020-04-01 00:09:38 -07:00
parent b473e4c4af
commit a3dcbf647e
19 changed files with 365 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,5 +1,5 @@
.next
node_modules
*.log
!/yarn.lock
!/package-lock.json
yarn.lock
package-lock.json

2
assets-metadata-css-starter/package.json
View File

@@ -8,7 +8,7 @@
"start": "next start"
},
"dependencies": {
"next": "9.3.2",
"next": "9.3.3",
"react": "16.13.1",
"react-dom": "16.13.1"
}

2
data-fetching-starter/package.json
View File

@@ -8,7 +8,7 @@
"start": "next start"
},
"dependencies": {
"next": "9.3.2",
"next": "9.3.3",
"react": "16.13.1",
"react-dom": "16.13.1"
}

25
dynamic-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*

30
dynamic-routes-starter/README.md Normal file
View File

@@ -0,0 +1,30 @@
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.

64
dynamic-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 = 'Shu Uesugi'
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
dynamic-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;
}

35
dynamic-routes-starter/lib/posts.js Normal file
View File

@@ -0,0 +1,35 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
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 slug
const slug = 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 slug
return {
slug,
...data
}
})
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
} else {
return -1
}
})
}

16
dynamic-routes-starter/package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"gray-matter": "^4.0.2",
"next": "9.3.3",
"react": "16.13.1",
"react-dom": "16.13.1"
}
}

5
dynamic-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

50
dynamic-routes-starter/pages/index.js Normal file
View File

@@ -0,0 +1,50 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/Layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
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(({ slug, date, title }) => (
<li className={utilStyles.listItem}>
{title}
<br />
{slug}
<br />
{date}
</li>
))}
</ul>
</section>
</Layout>
)
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
return {
props: {
allPostsData
}
}
}
export default Home

19
dynamic-routes-starter/pages/posts/first-post.js Normal file
View File

@@ -0,0 +1,19 @@
import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/Layout'
const FirstPost = () => (
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</Layout>
)
export default FirstPost

12
dynamic-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.

8
dynamic-routes-starter/posts/first-post.md Normal file
View File

@@ -0,0 +1,8 @@
---
title: "First Post"
date: "2020-01-01"
---
This is the first post!
It uses the [Static Generation](https://nextjs.org/docs/basic-features/pages) feature of Next.js.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

27
dynamic-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;
}

44
dynamic-routes-starter/styles/utils.module.css Normal file
View File

@@ -0,0 +1,44 @@
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
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;
}

2
navigate-between-pages-starter/package.json
View File

@@ -8,7 +8,7 @@
"start": "next start"
},
"dependencies": {
"next": "9.3.2",
"next": "9.3.3",
"react": "16.13.1",
"react-dom": "16.13.1"
}