Michiel Leunens -- Next Foundry, a Next.js template

This is an opinionated starter template in Next.js v12.1. This way you can churn more (static) websites with less code.

💡 This project contains a lot of custom components. Everything is loosely coupled, so you can easily delete what you don't need. ⚠️ IE11 is not supported.

🔥 Current Features (& TODO)

Development

• ✅ Typescript
• ✅ Yarn
• ✅ ES-Lint / Prettier
• ✅ Husky
• ✅ Correct *.ignore
• ✅ env-variables
• ✅ Versioning

Theming & Styles

• ✅ scss-modules
• ✅ Modern reset.scss
• ✅ Fully featured design-system (colors, typography,...)
• ✅ Theming with next-theming (complete with dark theme)
• ✅ Easy class toggling
• ✅ Animations with Framer Motion

Components & Functionalities

• ✅ Responsive skeleton
• ✅ Dynamic layout
• ✅ SEO-component with next-seo
• ✅ Internationalization (i18n)
• ✅ Navigation
• ✅ Footer
• ✅ 404 page
• ✅ Error page
• ✅ OnClickOutside and other usefull hooks
• ✅ Cookie consent
• ✅ Form validation
• ✅ MDX & MD page generation with i18n
• ✅ Privacy & Terms and conditions page

UI-components

• ✅ Responsive Grid-system
• ✅ Logo
• ✅ Button
• ✅ Next-Image w/ Aspect Ratio hack
• ✅ Spinner
• ✅ Dropdown
• ✅ Toasts (react-toastify)
• ✅ Modern, accessible Modal
• ✅ Banner
• ✅ Form
• ✅ TextField
• ✅ NumberField
• ✅ Checkbox
• ✅ RadioButton
• ✅ Switch
• ✅ Select Field (Single and Multi Select)
• ✅ Text Area
• ✅ Tooltip
• ✅ Badge
• ✅ Loading Placeholder
• ✅ Accordion
• ✅ Language Switcher
• ✅ Map powered by mapbox

Other

• ✅ SEO optimizations with custom image
• ✅ Web manifest
• ✅ Scaled favicons
• ✅ Chrome transitions bug fix
• ✅ Body Scroll Lock
• ✅ Active Link styling
• ✅ Cookie management
• ✅ sitemap.xml
• ✅ robots.txt
• ✅ Smooth scrolling with polyfill

Future

• ❌ Carousel
• ❌ Tabs
• ❌ Page-transitions
• ❌ Pagination Component
• ❌ Infinte Scrolling List
• ❌ Paralax
• ❌ Client-Authentication

Getting Started

Install dependencies:

yarn

Run the development server:

yarn dev

Run a production build:

yarn build
yarn start

Formatting and Linting

This template makes use of Husky, which will run es-lint and prettier automatically before each commit. In case you want to run these commands manually, you can do as follows:

yarn lint

yarn format

Self host fonts

Want to self-host your fonts? (recommended!), you can easily set this up:

Download your .woff2 font(s) from eg: Google webfont helper.

.woff2 will suffice for support. If you want to support older browsers, like IE11, you can download the .woff variant as well as a fallback.

1. Put your fonts in the global/fonts folder. Create one if it does not exist yet.
2. Navigate to styles/common/_typography.scss and uncomment the @font-face code-block.
   1. ⚠️ Duplicate the @font-face for each font-style your're serving (eg 400, 400i, 700,...)
   2. Add your font to the scss variables of choice. eg: $font-family-base: 'My Font', $font-family-system;. You can add it to your _theme.scss file as well instead, if you want a different font per theme.
3. Lasly, navigate to components/common/Head and add this <link> tag for EACH font-file you added in the fonts folder. Enjoy the free lighthouse/performance improvements.

<link
  rel="preload"
  href="/fonts/myFont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

SEO

This template is configured with Next-SEO to bring out the best of Next.js. Follow the documentation for more information on how to customize this to your liking.

The default seo-default configuration is located in the components/common/Head file. Change it to your liking. Don't forget to add your google-site-verification meta-tag!

You can add an og:image for each page, but a default image is configured in the default settings as wel. This image is named card.jpg, and can be found under /global/. Swap this image out with your custom card.jpg.

Internationalization (i18n)

Translation is provided by Next's build-in internationalization's + a neat little package called Next-translate. Easy to follow documentation. The default provided languages in this template are English, Dutch and French as I'm Belgian 😄.

Favicons en Webmanifest

Go to a favicon generator like favicongenerator. For this generator, in the last step, you can provide a custom directory. Enter the /meta/ directory and download your files. Place them in the public/meta/ folder. If the generator also created a webmanifest, put it there as well. Otherwise, you'll need to create one yourself. (Recommended).

Lastly, copy the <link> and <meta> tags and overwrite the current ones in components/common/Head.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.