Shiftwalk Starter
Demo: https://sg-next-tailwind-motion.vercel.app/
Locomotive Scroll Demo: https://sg-next-tailwind-motion-locomotive.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
@importand 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
-
Clone the repo
git clone https://github.com/samuelgoddard/next-tailwind-motion.git
-
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 -
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*
|-- 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
|-- jsconfig.json *// module aliasing*
|-- postcss.config.js *// Tailwind, CSS import, CSS nesting init*
|-- next.config.js *// Prefer Preact to React*
|-- package.json
|-- README.md
|-- tailwind.config.js