├── .gitignore
├── components
└── layout.js
├── package-lock.json
├── package.json
├── pages
├── _app.js
├── about.js
├── blog.js
├── blog
│ └── [slug].js
└── index.js
└── styles
├── global.css
└── post.module.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | out
4 | build
5 | .DS_Store
--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import { useRouter } from "next/router"
3 |
4 | export default function Layout({ children }) {
5 | const router = useRouter()
6 |
7 | return (
8 | <>
9 |
10 |
OurSite
11 |
12 |
13 |
14 |
18 |
19 |
23 |
24 |
28 |
29 |
30 |
33 |
Footer text, all rights reserved ©
34 |
{pageProps.title ? pageProps.title : "Our Basic Title"}
10 |
11 |
12 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
1 | export default function About(props) {
2 | return (
3 | <>
4 | About Us
5 | Welcome to this amazing about page. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro dolore officiis atque voluptas, quas, repellendus cum, magnam a alias unde reiciendis voluptates aliquam maxime laborum? Quae omnis eius impedit et?
6 | I have {props.repoCount} public repos on GitHub.
7 |
8 | )
9 | }
10 |
11 | export async function getStaticProps() {
12 | const response = await fetch("https://api.github.com/users/learnwebcode")
13 | const data = await response.json()
14 |
15 | return {
16 | props: {
17 | repoCount: data.public_repos
18 | },
19 | revalidate: 10
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/pages/blog.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | export default function Blog(props) {
4 | return (
5 | <>
6 | The Blog
7 | {props.posts.map((post, index) => {
8 | return (
9 |
10 |
11 |
13 |
{post.content}
14 |
15 |
10 | « back to all blog posts
12 |
13 |
14 | {props.post.title}
15 | {props.post.content}
16 | router.push("/blog")}>
17 | Click me to programmatically navigate or redirect
18 |
19 |
20 | )
21 | }
22 |
23 | export async function getStaticPaths() {
24 | const response = await fetch("https://learnwebcode.github.io/json-example/posts.json")
25 | const data = await response.json()
26 |
27 | const thePaths = data.posts.map(pet => {
28 | return { params: { slug: pet.slug } }
29 | })
30 |
31 | return {
32 | paths: thePaths,
33 | fallback: false
34 | }
35 | }
36 |
37 | export async function getStaticProps(context) {
38 | const response = await fetch("https://learnwebcode.github.io/json-example/posts.json")
39 | const data = await response.json()
40 | const thePost = data.posts.filter(post => post.slug === context.params.slug)[0]
41 |
42 | return {
43 | props: {
44 | post: thePost,
45 | title: thePost.title
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | export default function Home(props) {
2 | return (
3 |
4 |
Welcome to our homepage.
5 |
This is the best home page in the world. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum aspernatur illum architecto cumque recusandae fuga sequi necessitatibus deleniti repellat harum nobis, dolor veniam vero deserunt. Voluptatibus, ducimus deserunt. Recusandae, dolore.
6 |
The weather: {props.forecast}
7 |