Update data-fetch and analyze-bundles 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',
 }) => (
@@ -27,7 +27,7 @@ const Layout: React.FunctionComponent<Props> = ({
         </Link>{' '}
         |{' '}
         <Link href="/initial-props">
-          <a>With Initial Props</a>
+          <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,7 +7,7 @@ type Props = {
   data: User
 }
 
-const ListItem: React.FunctionComponent<Props> = ({ data }) => (
+const ListItem: React.FC<Props> = ({ data }) => (
   <Link href={`/detail?id=${data.id}`}>
     <a>
       {data.id}: {data.name}

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { NextPageContext } from 'next'
+import { GetServerSideProps } from 'next'
 import Layout from '../components/Layout'
 import { User } from '../interfaces'
 import { findData } from '../utils/sample-api'
@@ -10,38 +10,35 @@ type Props = {
   errors?: string
 }
 
-class InitialPropsDetail extends React.Component<Props> {
-  static getInitialProps = async ({ query }: NextPageContext) => {
-    try {
-      const { id } = query
-      const item = await findData(Array.isArray(id) ? id[0] : id)
-      return { item }
-    } catch (err) {
-      return { errors: err.message }
-    }
-  }
-
-  render() {
-    const { item, errors } = this.props
-
-    if (errors) {
-      return (
-        <Layout title={`Error | Next.js + TypeScript Example`}>
-          <p>
-            <span style={{ color: 'red' }}>Error:</span> {errors}
-          </p>
-        </Layout>
-      )
-    }
+export default function(props: Props) {
+  const { item, errors } = props
 
+  if (errors) {
     return (
-      <Layout
-        title={`${item ? item.name : 'Detail'} | Next.js + TypeScript Example`}
-      >
-        {item && <ListDetail item={item} />}
+      <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 default InitialPropsDetail
+// Fetch data on each request.
+export const getServerSideProps: GetServerSideProps = async ({ query }) => {
+  try {
+    const { id } = query
+    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 getStaticProp: 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