Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules

Last update: Jun 9, 2022

Nextal - Next Starter Template

Mocking up web app with Nextal(speed)


Live Demo

Features

Coding Style

Dev tools

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit jvidalv/nextal my-nextjs-app
cd my-nextjs-app
yarn # If you don't have yarn installed, run: npm install -g yarn

Checklist

When you use this template, try follow the checklist to update your info properly

  • Rename name and author fields in package.json
  • Change the author name in LICENSE
  • Change the title in index.html
  • Change the favicon in public
  • Modify the manifest in public
  • Clean up the README's

And, enjoy :)

Usage

Development

Type:

yarn dev

Then visit http://localhost:3000

Build

To build like if it was for production run

yarn build
yarn start

Then you can visit http://localhost:3000 and check that everything works as expected.

Deploy on Netlify

Go to Netlify and select your repository, OK along the way, and your App will be live in a minute.

Issues

Dark mode

With CSS-Modules the "global" css-var .dark is not visible inside .module.css files, thus the Tailwind variant dark:x does not work.

In order for it to work inside module.css files you must leverage to :global, example:

:global(.dark) .title {
  @apply text-white;
}

Husky

If pre-commit hooks are not working be sure that you have installed husky: husky install.

By default this command should be triggered after yarn/npm deps are installed.

Why

I have created several NextJs webs recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.

So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. Feel free to tweak it or even maintains your own forks.

GitHub

https://github.com/jvidalv/nextal
You might also like...

Avneesh's Portfolio Template Built With React

Avneesh's Portfolio Template Built With React

Welcome to a Portfolio Template ๐Ÿ‘‹ This is Avneesh's portfolio, feel free to use it and contribute to it ๐Ÿ  Homepage โœจ Demo Using the template To use

Jun 9, 2022

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’…

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’…

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’… Looking for v5? The master branch is un

Jun 27, 2022

๐Ÿ‘ฉโ€๐ŸŽค CSS-in-JS library designed for high performance style composition

๐Ÿ‘ฉโ€๐ŸŽค CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ๐Ÿš€ See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

Jun 24, 2022

JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

Jun 23, 2022

๐ŸŽจ Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Jun 14, 2022

CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version = IE6* Demo The best s

Jun 21, 2022

CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022

Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Jun 19, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jun 18, 2022
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid ๐Ÿงน A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
๐Ÿ  Airbnb website using React, Next.js and Tailwind CSS
๐Ÿ  Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??๏ธ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
A basic authentication template based on React v17.
A basic authentication template based on React v17.

React based authentication page template This is my starter template for Login, Register and Forgot Password using ReactJS with simple form validation

Jun 15, 2022