Update analyze-bundles and withTypescript examples with getInitialProps to SSG #11014

examples/analyze-bundles/pages/index.js

@@ -2,18 +2,6 @@ import React from 'react'
 import Link from 'next/link'
 
 export default class Index extends React.Component {
-  static getInitialProps ({ req }) {
-    if (req) {
-      // Runs only in the server
-      const faker = require('faker')
-      const name = faker.name.findName()
-      return { name }
-    }
-
-    // Runs only in the client
-    return { name: 'Arunoda' }
-  }
-
   render () {
     const { name } = this.props
     return (
@@ -29,3 +17,13 @@ export default class Index extends React.Component {
     )
   }
 }
+
+export async function getStaticProps() {
+    // Runs only in the server
+    const faker = require('faker')
+    const name = faker.name.findName()
+    return { props : { name } }
+
+    // Runs only in the client
+    return { name: 'Arunoda' }
+}

examples/data-fetch/README.md

@@ -42,4 +42,4 @@ now
 Next.js was conceived to make it easy to create universal apps. That's why fetching data
 on the server and the client when necessary is so easy with Next.
 
-Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint).
+Using `getStaticProps` fetches data at build time.

examples/data-fetch/pages/index.js

@@ -13,10 +13,10 @@ function Index (props) {
   )
 }
 
-Index.getInitialProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/zeit/next.js')
   const json = await res.json() // better use it inside try .. catch
-  return { stars: json.stargazers_count }
+  return { props : { stars: json.stargazers_count } }
 }
 
 export default Index

examples/data-fetch/pages/preact.js

@@ -13,10 +13,10 @@ function Preact (props) {
   )
 }
 
-Preact.getInitialProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/developit/preact')
   const json = await res.json() // better use it inside try .. catch
-  return { stars: json.stargazers_count }
+  return { props : { stars: json.stargazers_count } }
 }
 
 export default Preact

examples/with-typescript/components/Layout.tsx

@@ -6,7 +6,7 @@ type Props = {
   title?: string
 }
 
-const Layout: React.FunctionComponent<Props> = ({
+const Layout: React.FC<Props> = ({
   children,
   title = 'This is the default title',
 }) => (
@@ -26,8 +26,8 @@ const Layout: React.FunctionComponent<Props> = ({
           <a>About</a>
         </Link>{' '}
         |{' '}
-        <Link href="/initial-props">
-          <a>With Initial Props</a>
+        <Link href="/static-props">
+          <a>With Static Props</a>
         </Link>
       </nav>
     </header>

examples/with-typescript/components/List.tsx

@@ -6,7 +6,7 @@ type Props = {
   items: User[]
 }
 
-const List: React.FunctionComponent<Props> = ({ items }) => (
+const List: React.FC<Props> = ({ items }) => (
   <ul>
     {items.map(item => (
       <li key={item.id}>

examples/with-typescript/components/ListDetail.tsx

@@ -6,7 +6,7 @@ type ListDetailProps = {
   item: User
 }
 
-const ListDetail: React.FunctionComponent<ListDetailProps> = ({
+const ListDetail: React.FC<ListDetailProps> = ({
   item: user,
 }) => (
   <div>

examples/with-typescript/components/ListItem.tsx

@@ -7,8 +7,8 @@ type Props = {
   data: User
 }
 
-const ListItem: React.FunctionComponent<Props> = ({ data }) => (
-  <Link href={`/detail?id=${data.id}`}>
+const ListItem: React.FC<Props> = ({ data }) => (
+  <Link href={`/detail/${data.id}`}>
     <a>
       {data.id}: {data.name}
     </a>

examples/with-typescript/pages/about.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 
-const AboutPage: React.FunctionComponent = () => (
+const AboutPage: React.FC= () => (
   <Layout title="About | Next.js + TypeScript Example">
     <h1>About</h1>
     <p>This is the about page</p>

examples/with-typescript/pages/detail/[id].tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import Layout from '../../components/Layout'
+import { User } from '../../interfaces'
+import { findData } from '../../utils/sample-api'
+import ListDetail from '../../components/ListDetail'
+
+type Props = {
+  item?: User
+  errors?: string
+}
+
+export default function(props: Props) {
+  const { item, errors } = props
+
+  if (errors) {
+    return (
+      <Layout title={`Error | Next.js + TypeScript Example`}>
+        <p>
+          <span style={{ color: 'red' }}>Error:</span> {errors}
+        </p>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout
+      title={`${item ? item.name : 'Detail'} | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  )
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [
+      { params: { id: '101' } },
+      { params: { id: '102' } },
+      { params: { id: '103' } },
+      { params: { id: '104' } },
+    ],
+    fallback: false,
+  }
+}
+
+// Fetch data on each request.
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  try {
+    const { id } = params!
+    const item = await findData(Array.isArray(id) ? id[0] : id)
+    return { props: { item } }
+  } catch (err) {
+    return { props: { errors: err.message } }
+  }
+}

examples/with-typescript/pages/initial-props.tsx → examples/with-typescript/pages/static-props.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next'
+import { NextPage, GetStaticProps } from 'next'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 import List from '../components/List'
@@ -10,10 +10,9 @@ type Props = {
   pathname: string
 }
 
-const WithInitialProps: NextPage<Props> = ({ items, pathname }) => (
+const WithStaticProps: NextPage<Props> = ({ items }) => (
   <Layout title="List Example (as Functional Component) | Next.js + TypeScript Example">
     <h1>List Example (as Function Component)</h1>
-    <p>You are currently on: {pathname}</p>
     <List items={items} />
     <p>
       <Link href="/">
@@ -23,13 +22,13 @@ const WithInitialProps: NextPage<Props> = ({ items, pathname }) => (
   </Layout>
 )
 
-WithInitialProps.getInitialProps = async ({ pathname }) => {
-  // Example for including initial props in a Next.js function compnent page.
-  // Don't forget to include the respective types for any props passed into
+// Fetch data at build time.
+export const getStaticProps: GetStaticProps = async () => {
+  // Example for including getStaticProps in a Next.js function component page.
   // the component.
   const items: User[] = await findAll()
 
-  return { items, pathname }
+  return { props: { items } }
 }
 
-export default WithInitialProps
+export default WithStaticProps