next NextPage TypeScript Examples

Source File: create.tsx From next-crud with MIT License

7 votes

UserCreate: NextPage = () => {
  const toast = useToast()
  const { replace } = useRouter()

  const onSubmit = async (values: IFormValues) => {
    try {
      await fetch(`/api/users`, {
        method: 'POST',
        body: JSON.stringify(values),
        headers: {
          'Content-Type': 'application/json',
        },
      })
      toast({
        status: 'success',
        description: 'User successfully created',
        duration: 2000,
      })
      replace('/users')
    } catch (e) {
      toast({
        status: 'error',
        description: 'Failed to create user',
        duration: 2000,
      })
    }
  }

  return (
    <Layout title="User create" backRoute="/users">
      <VStack spacing={4} width="100%">
        <Heading>User create</Heading>
        <UserForm onSubmit={onSubmit} />
      </VStack>
    </Layout>
  )
}

Source File: context-internal.ts From next-rpc with MIT License

6 votes

export function wrapPage<P, IP>(Page: NextPage<P, IP>): NextPage<P, IP> {
  if (typeof Page.getInitialProps === 'function') {
    Page.getInitialProps = wrapGetInitialProps(Page.getInitialProps);
  }
  return new Proxy(Page, {
    set(target, property, value) {
      if (property === 'getInitialProps' && typeof value === 'function') {
        return Reflect.set(target, property, wrapGetInitialProps(value));
      }
      return Reflect.set(target, property, value);
    },
  });
}

Source File: _app.tsx From use-selected-items-hook with MIT License

6 votes

App: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => (
  <div>
    <Head>
      <title>useSelectedItems</title>
      <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    </Head>

    <div className="sm:py-8 h-screen w-screen overflow-y-hidden bg-indigo-200">
      <div
        className="h-full min-h-full bg-white mx-auto overflow-hidden shadow-xl sm:rounded overflow-y-auto"
        style={{ maxWidth: "375px" }}
      >
        <Component {...pageProps} />
      </div>
    </div>
  </div>
)

Source File: index.page.tsx From crowdsource-dataplatform with MIT License

6 votes

ContributePage: NextPage = () => (
  <FunctionalPageBackground>
    <AsrSpeak />
  </FunctionalPageBackground>
)

Source File: 404.tsx From storefront with MIT License

6 votes

Custom404: NextPage = () => (
  <Layout>
    <Typography variant="h1">404</Typography>
    <Divider />
    <div>
      <Typography gutterBottom>We can’t seem to find a page you are looking for!</Typography>
      <Typography gutterBottom>
        You may have mistyped the address or the page may have moved.
      </Typography>
      <Typography gutterBottom>
        We’re sorry for the error and hope you’ll have a good day.
      </Typography>
    </div>
  </Layout>
)

Source File: [id].tsx From my-next.js-starter with MIT License

6 votes

FilmRoute: NextPage<IProps> = (props) => {
  return (
    <MainLayout title={`${props.film ? props.film.title : 'Film Detail'} | Next.js + TypeScript Example`}>
      <FilmPage
        film={props.film}
        errors={props.errors}
      />
    </MainLayout>
  );
}

Source File: index.tsx From houston with MIT License

6 votes

IndexPage: NextPage = memo(() => {
  return (
    <div className='app'>
      <Container layout='fluid'>
        <Row alignItems='center' justifyContent='center'>
          <Column xs={12}>
            <div className='logo'>
              <Image src='/images/logo.svg' alt='Logo' width={400} height={180} />
            </div>
          </Column>

          <Column md={12}>
            <Typography size='medium'>
              Houston with <b>NextJS</b> ❤️
            </Typography>

            <br />

            <Button>Docs</Button>
          </Column>
        </Row>
      </Container>
    </div>
  );
})

Source File: index.tsx From covid19-visualized with MIT License

6 votes

Page: NextPage = () => {
    const { data } = useFetch<Country[]>(API_BASEURL + 'confirmed')()

    return (
        <>
            <Summary />
            
            <div className="btn-link mb-24">
                <Link href="/region">
                    <Button block color="primary" text="See Country and Region Cases" />
                </Link>
                <Link href="/indonesia">
                    <Button className="mt-8" block color="danger" text="See Indonesia Cases" />
                </Link>
            </div>

            <h2 className="text-center mt-32 mb-12">World Visualization</h2>
            <Visualization
                id="world-visualization"
                data={data}
                visualize={visualize.world}
                legends={worldLegends.map(({ color, value }) => (
                    <div key={color} className="legends-item font is-size-small">
                        <div className="legends-detail">{value === 0 ? `No case infected` : `${value} or more cases infected`}</div>
                        <div className="legends-color mx-4" style={{ backgroundColor: color }} />
                    </div>
                ))}
            />
            
            <Daily />
        </>
    )
}

Source File: redirect.tsx From geist-ui with MIT License

6 votes

redirect = (destination: string) => {
  const Home: NextPage<Props> = ({ metaRedirect }) => {
    if (!metaRedirect) return null
    return (
      <Head>
        <meta httpEquiv="refresh" content={`0; url=${destination}`} />
      </Head>
    )
  }

  Home.getInitialProps = async ({ res }): Promise<Props> => {
    if (res) {
      res.writeHead(302, { Location: destination })
      res.end()
      return {}
    } else {
      await Router.push(destination)
    }

    return { metaRedirect: true }
  }

  return Home
}

Source File: 404.tsx From nextjs-hasura-boilerplate with MIT License

6 votes

Custom404Page: NextPage = () => {
  return (
    <>
      <Head>
        <title>Error Page</title>
      </Head>
      <Page statusCode={404} />
    </>
  );
}

Source File: 404.tsx From nextjs-strapi-boilerplate with MIT License

6 votes

Custom404Page: NextPage = () => {
  return (
    <>
      <Head>
        <title>Error Page</title>
      </Head>
      <Page statusCode={404} />
    </>
  );
}

Source File: news.tsx From next-translate-routes with MIT License

6 votes

NewsPage: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ news }) => (
  <Layout title="News | next-translate-routes Example">
    <h1>News</h1>
    {news.map(({ id, date, content }) => (
      <p key={id}>
        {new Date(date).toLocaleString()} - {content}
      </p>
    ))}
    <p>
      <Link href="/">
        <a>Go home</a>
      </Link>
    </p>
  </Layout>
)

Source File: index.tsx From xplorer with Apache License 2.0

6 votes

Home: NextPage = () => {
	return (
		<div className={styles.container}>
			<Head>
				<title>Create Next App</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}>Hello World.</h1>

				<p className={styles.description}>Actually there{"'"}s nothing here, just an auto updater API for Xplorer. </p>

				<div className={styles.grid}>
					<a href="https://xplorer.space" className={styles.card}>
						<h2>Xplorer Documentation &rarr;</h2>
						<p>Go to Xplorer home page instead</p>
					</a>
				</div>
			</main>
		</div>
	);
}

Source File: 404.tsx From core with GNU Affero General Public License v3.0

6 votes

NotFound: NextPage<{ message?: string }> = ({ message }) => {
	return (
		<div
			className='flex items-center justify-center h-screen select-none text-center'
		>
			<div>
				<div className='flex flex-row justify-center text-9xl'>
					4
					<img alt='robot' src='https://twemoji.maxcdn.com/v/13.0.1/svg/1f916.svg' className='w-24 mx-6 md:mx-12 rounded-full' />
					4
				</div>
				<h2 className='text-2xl font-semibold'>
					{message || ErrorText[404]}
				</h2>
			</div>
			
		</div>
	)
}

Source File: authenticated.tsx From next-page-tester with MIT License

6 votes

Authenticated: NextPage<Props> = ({ reqHeadersCookie }) => {
  return (
    <div>
      <span>Authenticated content</span>
      <Link href="/login">
        <a>To login</a>
      </Link>
      <div>req.headers.cookies: "{reqHeadersCookie}"</div>
    </div>
  );
}

Source File: index.tsx From ui with GNU Affero General Public License v3.0

6 votes

Index: NextPage = () => {
  const { t } = useTranslation()
  const { data, loading } = useQuery<AdminStatisticQueryData, AdminStatisticQueryVariables>(
    ADMIN_STATISTIC_QUERY
  )

  return (
    <Structure title={t('admin:home')} selected={'home'} loading={loading}>
      <Row gutter={16}>
        <Col sm={8} xs={24}>
          <Statistic title={t('statistic:totalForms')} value={data && data.forms.total} />
        </Col>

        <Col sm={8} xs={24}>
          <Statistic title={t('statistic:totalUsers')} value={data && data.users.total} />
        </Col>

        <Col sm={8} xs={24}>
          <Statistic
            title={t('statistic:totalSubmissions')}
            value={data && data.submissions.total}
          />
        </Col>
      </Row>
    </Structure>
  )
}

Source File: [slug].tsx From plasmic with MIT License

6 votes

ProductPage: NextPage<ProductPageProps> = ({
  plasmicData,
  queryCache,
  slug,
}) => {
  return (
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
    >
      <PlasmicComponent
        component={pagePath}
        componentProps={{
          fetcher: { where: { slug } },
        }}
      />
    </PlasmicRootProvider>
  );
}

Source File: [id].tsx From next-crud with MIT License

6 votes

UserCreate: NextPage<IProps> = ({ user }) => {
  const toast = useToast()
  const { replace } = useRouter()
  const queryClient = useQueryClient()

  const onSubmit = async (values: IFormValues) => {
    try {
      const userData = await fetch(`/api/users/${user.id}`, {
        method: 'PUT',
        body: JSON.stringify(values),
        headers: {
          'Content-Type': 'application/json',
        },
      }).then((res) => res.json())
      toast({
        status: 'success',
        description: 'User successfully updated',
        duration: 2000,
      })
      replace('/users')
      queryClient.setQueryData<
        InfiniteData<TPaginationResult<User>> | undefined
      >('users', (data) => {
        const page = data?.pages.find((page) =>
          page.data.some((userElem) => userElem.id === user.id)
        )
        if (page) {
          const elemIdx = page.data.findIndex((data) => data.id === user.id)
          page.data[elemIdx] = userData
        }

        return data
      })
    } catch (e) {
      toast({
        status: 'error',
        description: 'Failed to update user',
        duration: 2000,
      })
    }
  }

  return (
    <Layout title={user.username} backRoute="/users">
      <VStack spacing={4} width="100%">
        <Heading>User edition</Heading>
        <UserForm
          initialValues={{ username: user.username }}
          onSubmit={onSubmit}
        />
      </VStack>
    </Layout>
  )
}

Source File: learning.tsx From website with MIT License

6 votes

LearningPage: NextPage<LearningPageProps> = ({ featuredMaterials, theRest }) => (
  <Page title="Learning">
    <Content>
      <Box as="section" backgroundColor="reactBlue.100" px={[4, null, null, 8]} py={['3.1em', null, null, '6.1em']}>
        <Grid gap="2px" justifyContent="center" gridAutoFlow="row" textAlign="center" mx="auto" maxWidth="6xl">
          <Heading as="span" fontFamily="body" fontWeight={300} mb={2} textTransform="uppercase" size="md" textAlign="center">
            Ingin Belajar React?
          </Heading>
          <Heading as="h1" fontFamily="body" fontWeight={600} size="2xl" textAlign="center">
            Materi Pembelajaran
          </Heading>
          <Text as="h2" mt="20px" mb="16px" fontSize={16} textAlign="center">
            Beberapa konsep React memang terlihat janggal, tapi di luar itu React sangat mudah untuk dipelajari dan dipahami, baik mereka
            yang sudah mahir dalam JavaScript modern ataupun yang baru saja memulai. Cobalah memulai dari salah satu materi di bawah.
          </Text>
          <Grid templateColumns="repeat(auto-fit, minmax(calc(296px), 1fr))" gap="24px" mt="36px">
            {featuredMaterials.map(item => (
              <LearningCard heading={item.type} title={item.title} desc={item.description} href={item.url} key={item.title} />
            ))}
            {theRest.map(item => (
              <LearningCard heading={item.type} title={item.title} desc={item.description} href={item.url} key={item.title} />
            ))}
          </Grid>
        </Grid>
      </Box>
    </Content>
  </Page>
)

Source File: create.tsx From coindrop with GNU General Public License v3.0

6 votes

CreateFirstCoindrop: NextPage = () => {
    const { user } = useUser();
    const [isCreateTriggered, setIsCreateTriggered] = useState(false);
    const [candidatePiggybankPath, setCandidatePiggybankPath] = useState('');
    useCreatePiggybank(candidatePiggybankPath, setCandidatePiggybankPath, user, isCreateTriggered, setIsCreateTriggered);
    useEffect(() => {
        const pendingLoginCreatePiggybankPath = cookies.get('pendingLoginCreatePiggybankPath');
        if (pendingLoginCreatePiggybankPath) {
            setCandidatePiggybankPath(pendingLoginCreatePiggybankPath);
            setIsCreateTriggered(true);
        }
    }, []);
    return (
        <Flex
            direction="column"
            align="center"
            justify="center"
            my={6}
        >
            <Spinner size="lg" mb={3} />
            <Heading size="lg">
                Creating Coindrop...
            </Heading>
        </Flex>
    );
}

Source File: ConfirmedPage.tsx From solana-pay with Apache License 2.0

6 votes

ConfirmedPage: NextPage = () => {
    const { reset } = usePayment();

    return (
        <div className={css.root}>
            <div className={css.header}>
                <BackButton onClick={reset}>Start Over</BackButton>
                <TransactionsLink />
            </div>
            <div className={css.main}>
                <Progress />
            </div>
            <div className={css.footer}>
                <PoweredBy />
            </div>
        </div>
    );
}

Source File: 404.tsx From nextjs-hasura-fullstack with MIT License

6 votes

Custom404Page: NextPage = () => {
  return (
    <>
      <Head>
        <title>Error Page</title>
      </Head>
      <Page statusCode={404} />
    </>
  )
}

Source File: donate-with-checkout.tsx From nextjs-typescript-react-stripe-js with MIT License

6 votes

DonatePage: NextPage = () => {
  return (
    <Layout title="Donate with Checkout | Next.js + TypeScript Example">
      <div className="page-container">
        <h1>Donate with Checkout</h1>
        <p>Donate to our project ?</p>
        <CheckoutForm />
      </div>
    </Layout>
  )
}

Source File: footer.tsx From Upier with MIT License

6 votes

Footer: NextPage = () => {
  return (
    <footer className="footer">
      <h1 className="logo">U P I E R</h1>
      <p className="slogan">
        Shareable Payment&apos;s Link for{" "}
        <img
          src="/images/upi.svg"
          className="upilogo"
          width="40"
          alt="Upi Icon"
        />
      </p>
      <p className="tpf">
        <Link href={"/privacy-policy"} passHref>
          <u>Privacy Policy</u>
        </Link>
      </p>
      <p className="tuhin">
        An Open Source Project by{" "}
        <a
          href="http://thetuhin.com/?ref=upier"
          target="_blank"
          rel="noreferrer"
        >
          Tuhin
        </a>
      </p>
      <img
        src="/images/github.svg"
        className="center"
        width="35"
        alt="Github"
      />
    </footer>
  );
}

Source File: auth-rest-chakra-ui.tsx From typescript-fun with MIT License

6 votes

Index: NextPage = () => {
  const theme = useTheme();

  return (
    <Page title="Auth with REST | Chakra UI - TypeScript.fun" codesandbox>
      <Text style={[theme.heading1, { textAlign: 'center' }]}>
        Auth with REST | Chakra UI
      </Text>
      <View style={{ flex: 1 }}>
        <iframe
          src="https://codesandbox.io/embed/github/typescript-fun/typescript-fun/tree/master/examples/auth-rest-chakra-ui?fontsize=14&hidenavigation=1&module=%2Fpages%2Findex.tsx"
          style={{
            border: 0,
            overflow: 'hidden',
            height: '100%',
            width: '100%',
          }}
          title="auth-rest-chakra-ui"
          allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
        />
      </View>
    </Page>
  );
}

Source File: _error.tsx From tams-club-cal with MIT License

5 votes

PageNotFound: NextPage = () => {

    return (
        <Container sx={{ paddingTop: { md: 12, xs: 2 } }}>
            <Paper sx={{ py: 3 }}>
                <Typography
                    variant="h1"
                    sx={{
                        fontSize: '10rem',
                        fontWeight: 100,
                        color: (theme) => darkSwitchGrey(theme),
                        textAlign: 'center',
                    }}
                >
                    404
                </Typography>
                <Typography sx={textStyle}>The page you are trying to access could not be found :(</Typography>
                <Typography sx={textStyle}>But here are some cool pages that you could go to!</Typography>
                <Container sx={{ width: { md: '50%', xs: '100%' } }}>
                    <List sx={{ color: (theme) => darkSwitchGrey(theme) }}>
                        <ListItem button component={Link} href="/">
                            <ListItemIcon>
                                <HomeRoundedIcon />
                            </ListItemIcon>
                            <ListItemText>Home - See upcoming events and helpful external resources</ListItemText>
                        </ListItem>
                        <ListItem button component={Link} href="/clubs">
                            <ListItemIcon>
                                <AppsRoundedIcon />
                            </ListItemIcon>
                            <ListItemText>
                                Clubs - List of all the student organizations, both advised and independent
                            </ListItemText>
                        </ListItem>
                        <ListItem button component={Link} href="/volunteering">
                            <ListItemIcon>
                                <EmojiPeopleRoundedIcon />
                            </ListItemIcon>
                            <ListItemText>
                                Volunteering - Information about all the volunteering opportunities our clubs provide
                            </ListItemText>
                        </ListItem>
                        <ListItem button component={Link} href="/about">
                            <ListItemIcon>
                                <InfoRoundedIcon />
                            </ListItemIcon>
                            <ListItemText>
                                About - Learn about the history and creators behind tams.club, as well as leave us some
                                feedback!
                            </ListItemText>
                        </ListItem>
                    </List>
                </Container>
            </Paper>
        </Container>
    );
}

Source File: dashboard.page.tsx From crowdsource-dataplatform with MIT License

5 votes

DashboardPage: NextPage = () => (
  <FunctionalPageBackground>
    <AsrDashboard />
  </FunctionalPageBackground>
)

next#NextPage TypeScript Examples