examples/hello-next/pages/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import {
  Tweet,
  TwitterContextProvider,
} from "@jarred/react-static-tweets/src/index";
import "@jarred/react-static-tweets/styles.css";
import { fetchTweetAst } from "@jarred/static-tweets/src/fetchTweetAst";
import { SWRConfig } from "swr";
import styles from "../styles/Home.module.css";

export async function getStaticProps(ctx) {
  return {
    props: {
      tweetAst: await fetchTweetAst("1390084458724741121"),
    },
  };
}

export default function Home({ tweetAst }) {
  return (
    <SWRConfig value={{ fallback: { [tweetAst[0].data.id]: tweetAst } }}>
      <TwitterContextProvider
        value={{
          tweetAstMap: { [tweetAst[0].data.id]: tweetAst },
        }}
      >
        <div className={styles.container}>
          <Head>
            <title>Fo</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
          </Head>

          <main className={styles.main}>
      
            {/* <h1 className={styles.title}>
              Welcome to <a href="https://nextjs.org">Next.js!</a>
            </h1>

            <p className={styles.description}>
              Get started by editing{" "}
              <code className={styles.code}>pages/index.js</code>
            </p>

            <div className={styles.grid}>
              <Link href="/second">
                <div className={styles.card}>
                  <h2>Second Page &rarr;</h2>
                  <p>Link</p>
                </div>
              </Link>

              <a
                onClick={() => router.push("/foo/bar/third")}
                className={styles.card}
              >
                <h2>Third Page &rarr;</h2>
                <p>button, router.push()</p>
              </a>

              <a
                href="https://github.com/vercel/next.js/tree/master/examples"
                className={styles.card}
              >
                <h2>Examples &rarr;</h2>
                <p>Discover and deploy boilerplate example Next.js projects.</p>
              </a>

              <a
                href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                className={styles.card}
              >
                <h2>Deploy &rarr;</h2>
                <p>
                  Instantly deploy your Next.js site to a public URL with
                  Vercel.
                </p>
              </a>
            </div> */}
          </main>

          {/* <footer className={styles.footer}>
            <a
              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
              target="_blank"
              rel="noopener noreferrer"
            >
              Powered by{" "}
              <span className={styles.logo}>
                <img
                  src="/vercel.svg"
                  alt="Vercel Logo"
                  width={72}
                  height={16}
                />
              </span>
            </a>
          </footer> */}
        </div>

  );
}