codementorio / nextjs-redux-starter

Next.js + Redux + styled-components + Express = 😇

Next.js redux starter

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

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

• ▲ Based on latest Next.js
• 🗄 State management with redux-toolkit
• 💅 Styling with styled-components
• 🐐 Unit testing with react-testing-library
• 🛀 Linting staged changes on pre-commit with standard
• ⛑ react-helmet, dotenv, and more...

Getting started

git clone https://github.com/CodementorIO/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

nextjs-redux-starter's Issues

Error: Can't set headers after they are sent when yarn start

code is Very nice，but there are some bugs,

An in-range update of next is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The dependency next was updated from 9.3.0 to 9.3.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

next is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v9.3.1

Patches

• Correctly Count Object References: #10903
• Add warning when built-in CSS/SCSS support is disabled: #10942
• Add missing words in docs: #10941
• Update handling for patterns in custom routes: #10523
• Remove extra closing parenthesis: #10948
• Fix paths.params.type in getStaticPaths(document): #10959
• Check SSG Page via Route Lookup: #10971
• Make sure to not show pages/404 GIP error from _app having GIP: #10974
• Fix examples with relay-compiler: #10976
• Use core-js promise polyfill for nomodule browsers: #10985
• Improve Sass Error: #10982
• Add support for getStaticProps in pages/404: #10984
• Cms-datocms SerializableError fixes: #10986
• Fix Lint: 39ed664
• Generic form of GetStaticProps and GetServerSideProps: #10856
• Add Array.flat polyfill to nomodule-polyfills: #11004
• Add "noreferrer" to the prerender indicator doc link: #11005
• Update RegExp test and remove extra script: #11006
• Update data-fetch example to SSG: #11017
• Feat: update api-routes example to SSG: #11019
• Fix Test for Windows: c135830
• Update amp-first example to use GSSP: #11028
• Update with-zeit-fetch example to use SSG: #11026
• Update next-sass example to use built-in sass support: #11015
• Correct Cache-Control Behavior for GS(S)P: #11022
• Update custom-server-fastify example to not use internal fn: #11040
• Updated analyze-bundles example: #11031
• Use getServerSideProps for example: #11057
• Update custom-server-express example with getServerSideProps: #11035
• Upgrade next.js version on datocms example: #11039
• Update with-loading example to SSG: #11050
• Update form handler example: #11059
• Add support for static 404 when _error does not have custom GIP: #11062
• Update ssr-caching example with getServerSideProps: #11032
• Upgrade styled-jsx: #11070
• Update preset.ts: Remove any and use updated Node.js types: #11075
• Update @next/bundle-analyzer dependencies: #11068
• Update introduction.md: #11092
• Fix prettier linting: a231315
• Add experimental support for SCSS options: #11063
• Update API routes documentation to correctly mention middlewar…: #11083
• Update with-react-multi-carousel example to use GSSP: #11069
• Move public directory for development in examples/with-firebas…: #11085
• Update examples to use getStaticProps where possible: #11136

Credits

Huge thanks to @ijjk, @chibicode, @5alidz, @watanabeyu, @messa, @timneutkens, @followbl, @herrstucki, @danlutz, @Spy-Seth, @asotoglez, @josiahwiebe, @ragingwind, @ruisaraiva19, @SarKurd, @bobaaaaa, @akhila-ariyachandra, @lfades, @matamatanot, @JazibJafri, @tomdohnal, @carlospavanetti, @giuseppeg, @lifeiscontent, @7ma7X, @PaulHale, @john015, and @petamoriken for helping!

Commits

The new version differs by 53 commits.

• 9730be6 v9.3.1
• d661fac v9.3.1-canary.7
• 7e2d476 Update examples to use getStaticProps where possible (#11136)
• bfab990 Move public directory for development in examples/with-firebas… (#11085)
• 22e3b93 Update with-react-multi-carousel example to use GSSP (#11069)
• 3e1ace3 Update API routes documentation to correctly mention middlewar… (#11083)
• 25d8652 v9.3.1-canary.6
• ea7c1e1 Add support for SCSS options (#11063)
• a231315 Fix prettier linting
• d8d3337 Update introduction.md (#11092)
• 30cf4d5 v9.3.1-canary.5
• 4cac93a Update @next/bundle-analyzer dependencies (#11068)
• 85e9ce1 Update preset.ts: Remove any and use updated Node.js types (#11075)
• bc4aba1 Upgrade styled-jsx (#11070)
• bb3cce2 Update ssr-caching example with getServerSideProps (#11032)

There are 53 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

yarn version error

yarn install command gives the following error:

error [email protected]: The engine "yarn" is incompatible with this module. Expected version "1.3.2".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Thorwing error URL is not defined

/nextjs-redux-starter/node_modules/next/dist/next-server/lib/router/utils/parse-relative-url.js:1
(function (exports, require, module, __filename, __dirname) { "use strict";exports.__esModule=true;exports.parseRelativeUrl=parseRelativeUrl;var _utils=require("../../utils");const DUMMY_BASE=new URL(typeof window==='undefined'?'http://n':(0,_utils.getLocationOrigin)());/**
^

ReferenceError: URL is not defined
at Object. /nextjs-redux-starter/node_modules/next/dist/next-server/lib/router/utils/parse-relative-url.js:1:193)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/nextjs-redux-starter/node_modules/next/dist/next-server/lib/router/utils/prepare-destination.js:1:199)
at Module._compile (module.js:653:30)

Why is helmet necessary?

Since you can already customize what's in the head by importing 'next/head' and customizing, is helmet necessary? Thanks for any advice, I'm trying to figure out whether I should gut helmet or if there's an edge case I'm not thinking of.

Any suggestions for implementing with Redux Saga?

ReduxDevTools does not work

This boilerplate does not seem to work with ReduxDevTools. The RDT panel states "No store found. Make sure to follow the instructions.". Following the instructions does not seem to have any effect.

What am I missing?

TypeError: Cannot read property 'renderStatic' of undefined

I am getting this error when i pull and try to set up locally.

TypeError: Cannot read property 'renderStatic' of undefined at Function.getInitialProps (/Users/luwumalvinpatrick/Projects/perf-eval/client/.next/server/static/development/pages/_document.js:1092:69)

I am guessing this has something to do with the latest helment update introduced by #41

Solution
in _document.js. i've changed
import Helmet from 'react-helmet' into import { Helmet } from 'react-helmet'

Eslint not working in editor VScode

any suggestion on the above

An in-range update of helmet is breaking the build 🚨

The dependency helmet was updated from 3.18.0 to 3.19.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

helmet is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Commits

The new version differs by 8 commits.

• 17707ae 3.19.0
• ca34982 Update changelog for 3.19.0 release
• 06d5bde Update all remaining outdated dependencies
• 91e071c Update helmet-crossdomain from 0.3.0 to 0.4.0
• 1a27ebb Update Standard from 12.0.1 to 13.0.2
• eff00ef Bump lodash from 4.17.11 to 4.17.14
• d70b5cc Update Connect dev dependency to latest version
• debb3f8 Remove useless npmignore (see "files" in package.json)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

<title> tag warning in terminal

Getting this warning in terminal when running the boilerplate:

Warning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title

Is helmet conflicting with this warning and should it be excused?

next-redux-wrapper

I cannot use next-redux-wrapper version 2.0.0.
BTW this is very simple boilerplate. Love it

An in-range update of babel7 is breaking the build 🚨

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.8.4 to 7.8.6.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of react is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

There have been updates to the react monorepo:

• • The dependency react was updated from 16.13.0 to 16.13.1.

• The dependency react-dom was updated from 16.13.0 to 16.13.1.
• The dependency react-is was updated from 16.13.0 to 16.13.1.
• The devDependency react-test-renderer was updated from 16.13.0 to 16.13.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

What is the production command?

npm start command starts the dev server. I have tried the npm run build for production and it did build production ready folder but app is still running on dev mode when i start the app with node server/index.js command to run it in production mode. Is there any script i am missing for production?

An in-range update of lint-staged is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The devDependency lint-staged was updated from 10.0.8 to 10.0.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v10.0.9

10.0.9 (2020-03-24)

Bug Fixes

• use path.join and normalize to improve msys compatibility in resolveGitRepo (1ad263a)

Commits

The new version differs by 1 commits.

• 1ad263a fix: use path.join and normalize to improve msys compatibility in resolveGitRepo

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Implementing next/error

We are using your starter to build a website backed by Contentful. We cannot get the Next error page to work, though.

We created an error page and added an error page: `import React from 'react'

export default class Error extends React.Component {
static getInitialProps({ res, err }) {
const statusCode = res ? res.statusCode : err ? err.statusCode : null;
return { statusCode }
}

render() {
return (

{this.props.statusCode
? An error ${this.props.statusCode} occurred on server
: 'An error occurred on client'}

)
}
}`

but we only get a plain text error reading "Internal Server Error"
I suspect this is express not finding a route, but I am not sure what to do to give it a catch all. Here is my routes file and my server:

routes.js
`const nextRoutes = require('next-routes');

const routes = (module.exports = nextRoutes());

const APP_ROUTES = [
{
page: 'index',
pattern: '/',
},

{
page: 'creators',
pattern: '/creators',
},
{
page: 'product',
pattern: '/product',
},
{
page: 'plans',
pattern: '/plans',
},

{
page: 'customers',
pattern: '/customers',
},

{
page: 'demo',
pattern: '/demo',
},

// ABout
{
page: 'careers',
pattern: '/careers',
},
{
page: 'about',
pattern: '/about-us',
},
{
page: 'contact',
pattern: '/contact-us',
},
{
page: 'team',
pattern: '/team',
},
{
page: 'terms',
pattern: '/terms',
},
{
page: 'privacy',
pattern: '/privacy',
},

// Blog
{
page: 'blog',
pattern: '/blog',
},
{
page: 'article',
pattern: '/blog/:slug',
},

// Resources
{
page: 'resources',
pattern: '/resources',
},
{
page: 'resourceCategory',
pattern: '/resources/:category',
},
];

APP_ROUTES.forEach(route => routes.add(route));
Server:
const path = require('path');
const express = require('express');
const compression = require('compression');
const next = require('next');
const helmet = require('helmet');
const auth = require('http-auth');

const routes = require('../routes');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

const handler = routes.getRequestHandler(app);

const basic = auth.basic({
realm: '###ClientName###',
file: ${__dirname}/.htpasswd,
});

app.prepare().then(() => {
const server = express();

server.use(helmet());
server.use(compression());
if (process.env.NODE_ENV === 'staging') {
server.use(auth.connect(basic));
}

const staticPath = path.join(__dirname, '../static');
server.use(
'/static',
express.static(staticPath, {
maxAge: '30d',
immutable: true,
}),
);

server.get('*', (req, res) => handler(req, res));

server.listen(port, () => {
console.log(> Ready on http://localhost:${port});
});
});
`

_app.js

Can you create multiple _app.js files, each page has its own separate store

An in-range update of webpack-bundle-analyzer is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The devDependency webpack-bundle-analyzer was updated from 3.6.0 to 3.6.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack-bundle-analyzer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Commits

The new version differs by 17 commits.

• 660dba6 v3.6.1
• 387d7f9 Merge pull request #339 from webpack-contrib/update-some-deps
• e90b3b1 Downgrade terser-webpack-plugin because v2 requires at least Node v8.9
• 45ffbf9 Update some dependencies to get rid of vulnerability warnings
• dd4a03a Merge pull request #328 from pustovalov/node-ci
• f2f7fda Add Node 12 to CI
• 7cefb58 Merge pull request #314 from mhxbe/bugfix/page-title-hours-minutes
• 2596783 Consolidate changelog whitespace
• 3faca9d Merge branch 'master' into bugfix/page-title-hours-minutes
• f614bd1 Update CHANGELOG.md
• 4b58fae Revert .padStart to .slice since padStart is not supported in Node v6
• c95df99 Fix changelog missing v3.6.0 section
• f04ab3e Use .padStart(2,0) to prefix one-digit numbers with zero
• 5219462 Merge branch 'bugfix/page-title-hours-minutes' of github.com:mhxbe/webpack-bundle-analyzer into bugfix/page-title-hours-minutes
• 27b2de0 Use .slice() in favor of soon to be deprecated .substr()

There are 17 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Server keeps on crashing

<--- Last few GCs --->

[16807:0x10286a000] 107007 ms: Scavenge 2034.5 (2049.3) -> 2031.6 (2049.8) MB, 7.7 / 0.0 ms (average mu = 0.149, current mu = 0.096) allocation failure
[16807:0x10286a000] 107033 ms: Scavenge 2035.0 (2049.8) -> 2032.0 (2050.1) MB, 6.5 / 0.0 ms (average mu = 0.149, current mu = 0.096) allocation failure
[16807:0x10286a000] 107067 ms: Scavenge 2035.5 (2050.1) -> 2032.5 (2058.6) MB, 7.9 / 0.0 ms (average mu = 0.149, current mu = 0.096) allocation failure

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1000768af node::Abort() [/usr/local/bin/node]
2: 0x100076a33 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0x10016a827 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
4: 0x10016a7bc v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x100337ce5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
6: 0x100338dd3 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
7: 0x1003365b3 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0x10033426f v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x10033ba09 v8::internal::Heap::FinalizeIncrementalMarkingIfComplete(v8::internal::GarbageCollectionReason) [/usr/local/bin/node]
10: 0x100349dff v8::internal::IncrementalMarkingJob::Task::RunInternal() [/usr/local/bin/node]
11: 0x1000c8d64 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_deletev8::Task >) [/usr/local/bin/node]
12: 0x1000c81b0 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/usr/local/bin/node]
13: 0x10086838c uv__async_io [/usr/local/bin/node]
14: 0x1008788ed uv__io_poll [/usr/local/bin/node]
15: 0x100868816 uv_run [/usr/local/bin/node]
16: 0x1000ac577 node::NodeMainInstance::Run() [/usr/local/bin/node]
17: 0x100056ccc node::Start(int, char**) [/usr/local/bin/node]
18: 0x7fff5f6513d5 start [/usr/lib/system/libdyld.dylib]
19: 0x2

Can not load font

I need to use font in my css for using icon

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello/fontello.eot?14833847');
  src: url('../fonts/fontello/fontello.eot?14833847#iefix') format('embedded-opentype'),
       url('../fonts/fontello/fontello.woff2?14833847') format('woff2'),
       url('../fonts/fontello/fontello.woff?14833847') format('woff'),
       url('../fonts/fontello/fontello.ttf?14833847') format('truetype'),
       url('../fonts/fontello/fontello.svg?14833847#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }

But it's seem the font couldn't be loaded. Please help to check.