React Templates & Themes Logo React Templates & Themes
Shiftwalk Nextjs Starter screenshot

Shiftwalk Nextjs Starter

Author Avatar Theme by Shiftwalk
Updated: 21 Mar 2023
66 Stars

A simple Next.js starter kit with TailwindCSS (JIT) and Framer Motion preconfigured. Optional feature branches for Locomotive Scroll, Sanity and Dato configuration coming soon...

Github Live Preview

Categories

Framer Nextjs Tailwind

Overview

Shiftwalk Starter is a Next.js boilerplate with TailwindCSS, Framer Motion, and other preconfigured features. It provides a simplified setup for developers to quickly start building Next.js projects with these frameworks.

Features

  • Next 12: Utilizes the latest version of Next.js for improved performance and features.
  • SWC Minification: Uses SWC to optimize JavaScript code for faster-loading pages.
  • Tailwind 3.0: Preconfigured setup for TailwindCSS, a utility-first CSS framework.
  • Custom PostCSS setup: Allows for easy @import and CSS nesting in the project.
  • Framer Motion 4: Integrated with LazyMotion setup to reduce the bundle size.
  • Preact instead of React: Uses Preact as the default rendering engine for a smaller bundle size.
  • SEO preconfigured: Includes next-seo to streamline search engine optimization.
  • Module Aliasing: Configured with jsconfig.json to enable module aliasing for cleaner imports.
  • Feature branch with Locomotive Scroll: Smooth, lerp-based page scrolling feature included in a separate branch.
  • Out-of-the-box 100 scores on Page Speed Insights: Preconfigured optimizations for achieving high scores on both mobile and desktop.
  • Roadmap / Coming Soon: Planned feature branches with preconfigured setup for Sanity, DatoCMS, and GSAP.

Installation

To quickly start using Shiftwalk Starter:

  1. Clone the repository.
  2. Once cloned, navigate to the project’s directory.
  3. Install the local dependencies by running the following command:
npm install
  1. Start the development server with the following command:
npm run dev
  1. Open the source code and start editing in your preferred code editor.
  2. The site will be running at http://localhost:3000.

Summary

Shiftwalk Starter is a Next.js boilerplate that provides a streamlined setup for developing projects with TailwindCSS, Framer Motion, and other preconfigured features. With a focus on performance and ease of use, it offers the latest versions of Next.js and TailwindCSS, custom PostCSS setup, and out-of-the-box optimizations for SEO and page speed. The boilerplate also includes separate feature branches for additional integrations like Locomotive Scroll, Sanity, DatoCMS, and GSAP.