From 43c11904d393817a7aac7b985bdd6876b6787693 Mon Sep 17 00:00:00 2001 From: Shaswat Saxena Date: Thu, 19 Mar 2020 01:45:04 +0530 Subject: [PATCH] Updated with-typescript example to SSG (#11081) * Update with-typescript example to SSG * Fixed usage of localhost inside SSG methods Co-authored-by: Luis Alvarez --- .../with-typescript/components/Layout.tsx | 3 +- examples/with-typescript/pages/about.tsx | 2 +- .../with-typescript/pages/api/users/[id].ts | 17 ------- examples/with-typescript/pages/index.tsx | 24 ++++------ examples/with-typescript/pages/users/[id].tsx | 46 ++++++++++++------- .../with-typescript/pages/users/index.tsx | 26 +++++------ examples/with-typescript/utils/sample-api.ts | 13 ------ 7 files changed, 53 insertions(+), 78 deletions(-) delete mode 100644 examples/with-typescript/pages/api/users/[id].ts delete mode 100644 examples/with-typescript/utils/sample-api.ts diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx index 12c97489b86ca96..8370123bbe19d70 100644 --- a/examples/with-typescript/components/Layout.tsx +++ b/examples/with-typescript/components/Layout.tsx @@ -28,7 +28,8 @@ const Layout: React.FunctionComponent = ({ |{' '} Users List - + {' '} + | Users API {children} diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx index d3630721ebd9685..d8fa81877df63b2 100644 --- a/examples/with-typescript/pages/about.tsx +++ b/examples/with-typescript/pages/about.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import React from 'react' import Link from 'next/link' import Layout from '../components/Layout' diff --git a/examples/with-typescript/pages/api/users/[id].ts b/examples/with-typescript/pages/api/users/[id].ts deleted file mode 100644 index 9018b5544960d7f..000000000000000 --- a/examples/with-typescript/pages/api/users/[id].ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NextApiRequest, NextApiResponse } from 'next' -import { sampleUserData } from '../../../utils/sample-data' - -export default (req: NextApiRequest, res: NextApiResponse) => { - try { - const { id } = req.query - const selected = sampleUserData.find(data => data.id === Number(id)) - - if (!selected) { - throw new Error('Cannot find user') - } - - res.status(200).json(selected) - } catch (err) { - res.status(404).json({ statusCode: 404, message: err.message }) - } -} diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx index 81347c6b63381f3..57f913a9b58818b 100644 --- a/examples/with-typescript/pages/index.tsx +++ b/examples/with-typescript/pages/index.tsx @@ -1,19 +1,15 @@ -import * as React from 'react' import Link from 'next/link' import Layout from '../components/Layout' -import { NextPage } from 'next' -const IndexPage: NextPage = () => { - return ( - -

Hello Next.js 👋

-

- - About - -

- - ) -} +const IndexPage = () => ( + +

Hello Next.js 👋

+

+ + About + +

+ +) export default IndexPage diff --git a/examples/with-typescript/pages/users/[id].tsx b/examples/with-typescript/pages/users/[id].tsx index aa092621c30c809..81f15f721458951 100644 --- a/examples/with-typescript/pages/users/[id].tsx +++ b/examples/with-typescript/pages/users/[id].tsx @@ -1,29 +1,17 @@ -import * as React from 'react' -import { NextPageContext } from 'next' +import React from 'react' +import { GetStaticProps, GetStaticPaths } from 'next' import { User } from '../../interfaces' +import { sampleUserData } from '../../utils/sample-data' import Layout from '../../components/Layout' import ListDetail from '../../components/ListDetail' -import { sampleFetchWrapper } from '../../utils/sample-api' type Props = { item?: User errors?: string } -class InitialPropsDetail extends React.Component { - static getInitialProps = async ({ query }: NextPageContext) => { - try { - const { id } = query - const item = await sampleFetchWrapper( - `http://localhost:3000/api/users/${Array.isArray(id) ? id[0] : id}` - ) - return { item } - } catch (err) { - return { errors: err.message } - } - } - +export default class StaticPropsDetail extends React.Component { render() { const { item, errors } = this.props @@ -49,4 +37,28 @@ class InitialPropsDetail extends React.Component { } } -export default InitialPropsDetail +export const getStaticPaths: GetStaticPaths = async () => { + // Get the paths we want to pre-render based on users + const paths = sampleUserData.map(user => ({ + params: { id: user.id.toString() }, + })) + + // We'll pre-render only these paths at build time. + // { fallback: false } means other routes should 404. + return { paths, fallback: false } +} + +// This function gets called at build time on server-side. +// It won't be called on client-side, so you can even do +// direct database queries. +export const getStaticProps: GetStaticProps = async ({ params }) => { + try { + const id = params?.id + const item = sampleUserData.find(data => data.id === Number(id)) + // By returning { props: item }, the StaticPropsDetail component + // will receive `item` as a prop at build time + return { props: { item } } + } catch (err) { + return { props: { errors: err.message } } + } +} diff --git a/examples/with-typescript/pages/users/index.tsx b/examples/with-typescript/pages/users/index.tsx index 67638d050798822..7b3ee883b3a6754 100644 --- a/examples/with-typescript/pages/users/index.tsx +++ b/examples/with-typescript/pages/users/index.tsx @@ -1,23 +1,22 @@ -import { NextPage } from 'next' +import { GetStaticProps } from 'next' import Link from 'next/link' +import { User } from '../../interfaces' +import { sampleUserData } from '../../utils/sample-data' import Layout from '../../components/Layout' import List from '../../components/List' -import { User } from '../../interfaces' -import { sampleFetchWrapper } from '../../utils/sample-api' type Props = { items: User[] - pathname: string } -const WithInitialProps: NextPage = ({ items, pathname }) => ( +const WithStaticProps = ({ items }: Props) => (

Users List

- Example fetching data from inside getInitialProps(). + Example fetching data from inside getStaticProps().

-

You are currently on: {pathname}

+

You are currently on: /users

@@ -27,15 +26,12 @@ const WithInitialProps: NextPage = ({ items, pathname }) => ( ) -WithInitialProps.getInitialProps = async ({ pathname }) => { - // Example for including initial props in a Next.js function component page. +export const getStaticProps: GetStaticProps = async () => { + // Example for including static props in a Next.js function component page. // Don't forget to include the respective types for any props passed into // the component. - const items: User[] = await sampleFetchWrapper( - 'http://localhost:3000/api/users' - ) - - return { items, pathname } + const items: User[] = sampleUserData + return { props: { items } } } -export default WithInitialProps +export default WithStaticProps diff --git a/examples/with-typescript/utils/sample-api.ts b/examples/with-typescript/utils/sample-api.ts deleted file mode 100644 index 3f193c204668767..000000000000000 --- a/examples/with-typescript/utils/sample-api.ts +++ /dev/null @@ -1,13 +0,0 @@ -import fetch from 'isomorphic-unfetch' - -export async function sampleFetchWrapper( - input: RequestInfo, - init?: RequestInit -) { - try { - const data = await fetch(input, init).then(res => res.json()) - return data - } catch (err) { - throw new Error(err.message) - } -}