NextJS Boilerplate

NextJS boilerplate based upon the Shiftwalk Starter and expanded with the following enhancements:

• Apollo Client for GraphQL queries across any endpoint
• Typescript code generator to automatically generate Types from your endpoint
• Storybook Component library

Shiftwalk Starter

Demo: https://sg-next-tailwind-motion.vercel.app/

A simple Next.js boilerplate with TailwindCSS (JIT), Framer Motion, and a few other nice bits preconfigured.

✨ Features

• Next 12
• SWC Minification
• Tailwind 3.0
• Custom PostCSS setup preconfigured to allow for @import and simple CSS nesting
• Framer Motion 4 (With LazyMotion setup for smaller bundle sizes)
• Preact preconfigured instead of React for smaller bundle size*
• SEO preconfigured with next-seo
• Module Aliasing preconfigured with jsconfig.json
• Feature branch with Locomotive Scroll preconfigured for smooth, lerp based page scrolling
• Out the box 100 scores on both mobile & desktop on Page Speed Insights

*To remove Preact and switch back to React simply remove the code in next.config.js

Roadmap / Coming Soon...

• Feature branch with Sanity preconfigured
• Feature branch with DatoCMS preconfigured
• Feature branch with GSAP preconfigured

🚀 Quick start

1. Clone the repo

   git clone https://github.com/samuelgoddard/next-tailwind-motion.git

2. Start developing

   Navigate into your new site’s directory and install the local dependencies first, then run the dev command.

   cd next-tailwind-motion/
   
   npm i
   npm run dev

3. Open the source code and start editing!

   Your site is will be running at http://localhost:3000

🗄 Directory Structure

|-- components
    |-- container.js *// A simple container component to wrap areas in a max width*
    |-- fancyLink.js *// A simple wrapper around `next/link`
    |-- footer.js *// Example footer component*
    |-- header.js *// Example header component*
    |-- layout.js *// Layout component that can be used to wrap your pages in a global layout*
|-- gql
    |-- apolloClient.js *// apollo graphQL client to query endpoint*
    |-- queries.js *// singular graphQL query file*
    |-- gen
        |--codegen.ts *// automatically generated types from graphQL endpoint (after running `npm run codegen`)*
        |-- schema.json *// automatically generated schema from graphQL endpoint (after running `npm run codegen`)
|-- helpers
    |-- seo.config.js *// default SEO configuration helper, imported in `pages/_app.js`*
    |-- transitions.js *// re-usable framer motion transition helper with a basic 'fade' transition to get started*
|-- pages
    |-- _app.js *// Includes default SEO component & Framer motion AnimatePresence init*
    |-- _document.js *// Default Next document component*
    |-- about.js
    |-- index.js
|-- public *// Next public assets*
|-- styles
    |-- _fonts.css *// custom webfont styles*
    |-- _typography.css *// custom typographical styles*
    |-- main.css *// Tailwind init and custom css imports*
|-- .gitignore
|-- tsconfig.json *// module aliasing & typescript options*
|-- postcss.config.js *// Tailwind, CSS import, CSS nesting init*
|-- next.config.js *// Prefer Preact to React*
|-- package.json
|-- README.md
|-- tailwind.config.js