Skip to content

Boilerplate for starting a new NextJS project with TypeScript, TailwindCSS, Theming, Storybook, Cypress, and MSW

Notifications You must be signed in to change notification settings

qhoekman/next-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project logo

Project Title


This is a boilerplate project to quickly start a new Next.js front-end project

📝 Table of Contents

🧐 About

Write about 1-2 paragraphs describing the purpose of your project.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them.

Installing

A step by step series of examples that tell you how to get a development env running.

yarn create next-app -e git@github.com:qhoekman/next-starter.git <project-name>
cd <project-name>
yarn install

Configure the .env file with the correct values, e.g. NEXT_PUBLIC_API_ENDPOINT needs to be set to the correct API endpoint.

The starter-kit is equipped with authentication and a example feature which can be used as a starting point for your project. To remove these run:

npm run gen cleanup

🎈 Usage

To start the development server run:

npm run dev

This will start the dev server on http://localhost:3000

npm run sb:dev

This will start the storybook server on http://localhost:6006

🍿 Generators

This project comes with a few generators to help you create a new component, page, hook or feature. You can run these generators by running:

npm run gen

The generator will ask you a few questions and then create the files for you.

🔧 Running the tests

The tests can be run for the entire project using:

npm run cy:open

This will open the Cypress Test Runner, where you can select which tests to run.

npm run cy:run

This will run all tests in the terminal.

npm run cy:run:ct

This will run all component tests in the terminal.

npm run cy:run:e2e

This will run all end to end tests in the terminal.

🔑 SSL setup

To run the project with SSL, you need to generate a certificate for localhost. You can do this by running the following commands:

brew install mkcert
mkcert -install
mkcert localhost

This will create a certifcate in the current directory which will be used by the dev server. You can now run the dev server with SSL by running:

npm run dev:ssl

This will start the dev server on https://localhost:3000.

You may only need this setup if the backend is runnin on a external domain over HTTPS and has CORS enabled with a secure cookie.

⛏️ Built Using

About

Boilerplate for starting a new NextJS project with TypeScript, TailwindCSS, Theming, Storybook, Cypress, and MSW

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published