Next.js + Redux + styled-components + Express = ๐Ÿ˜‡

Overview

Next.js redux starter

An opinionated Next.js starter kit with Express, Redux Toolkit, styled-components, and react-testing-library.

Build Status JavaScript Style Guide Greenkeeper badge

About

Next.js is an awesome and minimalistic framework to make a modern universal react app. However, there're times that we need a bit more features to build a complex SPA. That's why this project is born.

Features

Getting started

git clone https://github.com/kiddodev050/nextjs-redux-starter my-project
cd my-project
yarn install
yarn start

Then open http://localhost:3100/ to see your app.

Deployment

After npm run build finished, run

yarn serve

If you prefer using now, just modify now.json config.

Structure overview

โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ next.config.js
โ”œโ”€โ”€ now.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ pages
โ”‚   โ”œโ”€โ”€ _app.js
โ”‚   โ”œโ”€โ”€ _document.js
โ”‚   โ”œโ”€โ”€ about.js
โ”‚   โ””โ”€โ”€ index.js
โ”œโ”€โ”€ public
โ”‚   โ””โ”€โ”€ static
โ”œโ”€โ”€ server
โ”‚   โ””โ”€โ”€ index.js
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”œโ”€โ”€ config.js
โ”‚   โ”œโ”€โ”€ features
โ”‚   โ”œโ”€โ”€ libs
โ”‚   โ”œโ”€โ”€ store.js
โ”‚   โ”œโ”€โ”€ tests
โ”‚   โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”‚   โ””โ”€โ”€ test-utils.js
โ”‚   โ””โ”€โ”€ theme.js
โ””โ”€โ”€ yarn.lock
You might also like...

In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

Nov 25, 2022

A demo repository to play around with Vivid! Styled with Tailwind CSS

vivid-demo A demo repository to play around with Vivid! Mess around with a copy of our landing page to see how Vivid works! Learn more about Vivid at

Dec 15, 2022

Build redux logic, without getting nervous ๐Ÿ˜ฌ

Build redux logic, without getting nervous ๐Ÿ˜ฌ

Redux Cool Build redux logic, without getting nervous ๐Ÿ˜ฌ Description Redux Cool is an awesome tiny package that allows you to easily and intuitively w

Nov 3, 2022

"Space Travelers' Hub" This project will lay foundations for your understanding the new features for Redux, using slice reducer and API requires with createAsyncThunk

Space Travelers' Hub Space Travelers' Hub React - Redux "Space Travelers' Hub" This project will lay foundations for your understand new features for

Mar 6, 2022

Nodejs,Expreess,Mongodb,Reactjs,Redux,Java app,Google,Docker,Heroku,...

Nodejs,Expreess,Mongodb,Reactjs,Redux,Java app,Google,Docker,Heroku,...

Tiแบฟn ฤ‘แป™ cรดng viแป‡c Team: https://docs.google.com/spreadsheets/d/1BBv4CXNniNjqdIE7tjrG9UM4nprd3NSVy2FX9oaWq0Q/edit#gid=0 Web Online: https://movienetfli

Sep 17, 2022

Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) โš  โš  โš  Work in Progress โš 

Apr 14, 2022

React Native, Typescript, Redux, Healthcare

React Native, Typescript, Redux, Healthcare

nicolab-app React Native project using Redux & typescript This project aims to be a solid foundation for React native applications. It provides a clea

Jun 7, 2022

DisneyPlus-Clone (with Redux)

DisneyPlus-Clone (with Redux)

Disney+ Clone A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link You can view th

Jul 27, 2022

Front-End do projeto Kanban utilizando Vite e Redux

Front-End do projeto Kanban utilizando Vite e Redux

๐Ÿ“š Informaรงรตes sobre o projeto Eu sempre busquei usar tanto o Trello como o Notion para planejar meus projetos. Entretanto, andei observando alguns ou

Nov 25, 2022
Owner
Jin Shan(่ฟ›ๅฑฑ)
ไฝœไธบไธ€ๅ้ซ˜็บง่ฝฏไปถๅทฅ็จ‹ๅธˆ๏ผŒๅœจ่ฝฏไปถๅบ”็”จ็จ‹ๅบ็š„้œ€ๆฑ‚ๆ”ถ้›†ใ€ๅˆ†ๆžใ€่ฎพ่ฎกใ€ๅฎžๆ–ฝใ€็ปดๆŠคไปฅๅŠๆต‹่ฏ•ๅฎขๆˆท็ซฏ/ๆœๅŠกๅ™จๅ’Œ Web/็งปๅŠจๅบ”็”จ็จ‹ๅบ็ญ‰ๅ„ไธช SDLC ้˜ถๆฎตๆ‹ฅๆœ‰่ถ…่ฟ‡ 6 ๅนด็š„็ป้ชŒใ€‚
Jin Shan(่ฟ›ๅฑฑ)
Bookstore app built using React, Redux, and Styled Components

Bookstore Bookstore is an app that allows you to display a list of added books, add new book and remove a book. It is built using React, Redux, and St

Anselem Odimegwu 11 Dec 12, 2022
Next js boilerplate with redux toolkit, redux persist and axios

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jorge Alberto Villarreal Gongora 5 Apr 25, 2022
Trying 5 Redux Alternatives (Zustand, Recoil, Jotai, Rematch and Redux-Toolkit). Expalined on CoderOne Ytb channel

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Islem Maboud 5 Oct 3, 2022
Trivia-Quiz รฉ uma aplicaรงรฃo baseada no jogo Perguntados, em que consiste em um quiz de diferentes questรตes. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

TRIVIA-QUIZ Trivia-Quiz รฉ uma aplicaรงรฃo baseada no jogo Perguntados, em que consiste em um quiz de diferentes questรตes. Feito com ReactJS, JavaScript,

Daniela Farias 2 Feb 6, 2022
A Gatsby-based starter theme with e-commerce styled components

This beautiful theme from the Matter Design Team gives you the styling and scaffolding for your next e-commerce site. You can customize to your heart'

null 48 Jan 3, 2023
Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates a

Ivan Kuznietsov 3 Feb 8, 2022
Explore movies, tv shows. Built with Next.js, Tailwind CSS, Redux, Firebase, TypeScript, TMDB v3 API.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sinan Bekar 11 Dec 4, 2022
An express-ve way to start an express project

Express-ve express starter An express-ve way to start an express project. Checkout a demo project here or Learn how to use express-ve here Are you sta

Merhawi Fissehaye 3 Mar 28, 2022
A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Alexis H. Munsayac 9 Mar 25, 2022
๐Ÿ’ป Build terminal styled websites in minutes!

?? LiveTerm - build terminal styled websites in minutes! Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Ne

Vincent Wu 3.7k Dec 31, 2022