A sample Next.js project for getting started with MDX, Theme UI, & Hack Club Theme.
- Import this repo to your coding environment of choice. Download it,
git clone, or use the GitHub import on Glitch/Repl.it. yarnto install dependencies.yarn devto start your server.- Start adding your own pages & components in their respective directories.
We鈥檝e included an example theme switcher component at components/color-switcher.js,
which is included on every page through its inclusion in pages/_app.js.
Feel free to change it.
If you鈥檙e making a Hack Club HQ project, you鈥檙e allowed to use Hack Club鈥檚 font,
Phantom Sans.
To load it, simply uncomment the import '@hackclub/theme/fonts/reg-bold.css'
line in _app.js.
By default, the raw Hack Club Theme will be used.
If you鈥檇 like to edit the theme, we recommend making a theme file (perhaps at
lib/theme.js) along these lines:
import base from '@hackclub/theme'
const theme = base
// theme.fontSizes = [鈥
// theme.fonts.heading = ''
export default themeSuper easy: yarn dev -p 5000
These template includes @hackclub/meta
for adding meta tags to Hack Club HQ sites. To set default meta tags across all pages,
add the following to pages/_app.js:
// import Head from 'next/head'
// import Meta from '@hackclub/meta'
<Meta
as={Head}
name="Hack Club" // site name
title="Hackathons" // page title
description="List of upcoming high school hackathons" // page description
image="https://hackathons.hackclub.com/card.png" // large summary card image URL
color="#ec3750" // theme color
manifest="/site.webmanifest" // link to site manifest
/>If you鈥檙e not making a site for HQ, don鈥檛 use @hackclub/meta, since it adds
Hack Club鈥檚 favicons & info. Instead, we recommend making your own component,
perhaps at components/meta.js.
Example code
import Head from 'next/head'
import theme from '@hackclub/theme' // or '../lib/theme'
export default ({
name = 'Your Company',
title = 'Your Project',
description = '',
image = 'https://yourproject.vercel.app/card.png',
url = 'https://yourproject.vercel.app/'
}) => (
<Head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta name="twitter:title" content={title} />
<meta name="og:url" content={url} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content={name} />
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta name="twitter:description" content={description} />
<meta property="og:image" content={image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={image} />
<meta name="msapplication-TileColor" content={theme.colors.primary} />
<meta name="theme-color" content={theme.colors.primary} />
</Head>
)Hack Club HQ uses (& loves) Fathom Analytics for simple, privacy-focused analytics. (Check out our site鈥檚 analytics here.)
To add Fathom to your project, yarn add fathom-client, then you鈥檒l need to
load it appropriately in pages/_app.js. The script is located at
https://aardvark.hackclub.com/script.js.
Example file with Fathom
import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import NextApp from 'next/app'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import '@hackclub/theme/fonts/reg-bold.css'
import theme from '../lib/theme'
import { ThemeProvider } from 'theme-ui'
import * as Fathom from 'fathom-client'
const App = ({ Component, pageProps }) => {
const router = useRouter()
useEffect(() => {
Fathom.load('YOURCODE', {
includedDomains: ['hackclub.com'],
url: 'https://aardvark.hackclub.com/script.js'
})
const onRouteChangeComplete = () => Fathom.trackPageview()
router.events.on('routeChangeComplete', onRouteChangeComplete)
return () => {
router.events.off('routeChangeComplete', onRouteChangeComplete)
}
}, [])
return (
<ThemeProvider theme={theme}>
<Meta as={Head} />
<Component {...pageProps} />
</ThemeProvider>
)
}
export default AppWe recommend using Vercel for deployment. It requires no configuration, is totally free for personal projects, and supports all the features of Next.js with the best performance. Refer to their documentation for more details.
You can also deploy your site to Netlify, which is also free. Refer to their documentation on the necessary configuration.
