Issue 1:
Bug report

While trying for the first time nextjs got this error during development. Is this normal?

Describe the bug

After signaling SIGINT with control+c in the console during npm run dev the console throws some errors.

To Reproduce

Steps to reproduce the behavior:

Initialize npm

npm init -y

Install the core NextJS dependencies:

npm install --save next react react-dom

Add scripts to the package.json file:

"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}

Create pages/index.js file:

import React from "react";

export default () => {
return (
<div>
<p>Hello world</p>
</div>
);
}

Start npm run dev:

DONE Compiled successfully in 1801ms

> Ready on http://localhost:3000

Press control+c in the console (this is the buggy behavior):

^Cgot signal SIGINT, exiting
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@1.0.0 dev: `next`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Felipe/.npm/_logs/2018-08-07T17_37_32_226Z-debug.log

Expected behavior

I think there shouldn't be any errors while gracefully exiting the app during development.

System information

OS: macOS

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"next": "^6.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}

Additional context

debug.log output:

8 verbose lifecycle test@1.0.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/Fe lipe/Local_Projects/Aprender/nextjs/test/node_modules/.bin:/Users/Felipe/anaconda3/bin:/usr/local/sbin:/usr/local/opt/fzf/b in:/Users/Felipe/google-cloud-sdk/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
9 verbose lifecycle test@1.0.0~dev: CWD: /Users/Felipe/Local_Projects/Aprender/nextjs/test
10 silly lifecycle test@1.0.0~dev: Args: [ '-c', 'next' ]
11 silly lifecycle test@1.0.0~dev: Returned: code: 1 signal: null
12 info lifecycle test@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: test@1.0.0 dev: `next`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:304:1 6)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:5 5:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:961:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
14 verbose pkgid test@1.0.0
15 verbose cwd /Users/Felipe/Local_Projects/Aprender/nextjs/test
16 verbose Darwin 17.7.0
17 verbose argv "/usr/local/Cellar/node/10.7.0/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v10.7.0
19 verbose npm v6.3.0
20 error code ELIFECYCLE
21 error errno 1
22 error test@1.0.0 dev: `next`
22 error Exit status 1
23 error Failed at the test@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Looked for any similar error but couldn't find any. If this is a duplicate please excuse me.

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Context

When navigating through my app I find that any time a page requires an api call to load the data I get a delay as the data is loading, so to fix this issue I am using onRouteChangeStart to activate the menu item and provide a skeleton screen so the user knows that something is loading.

This technique is working really as the user gets instant feedback and makes the app look much faster. The issue I am having is when loading a dynamic page eg /news/:article1 the state doesn't change to false and the component appears to be always loading. This is more likely to be an issue with my code not handling a route change in the same 'page' than a issue with next/router. Can someone provide me with some advice on how to fix this issue please?

Expected Behavior

Basic Page: On home page / click news

this.setState({
loading: true,
pageLoading: 'news'
})

Then when news page loads.

this.setState({
loading: false,
pageLoading: ''
})

Dynamic Page: Click /news/article-1 (<Link prefetch as={'/news?article=article-1'} href={'/news/article-1'}><a>{'article 1'}</a></Link>)

this.setState({
loading: true,
pageLoading: 'news'
})

Then when news page loads.

this.setState({
loading: false,
pageLoading: ''
})

Current Behavior

Basic Page as described above works as expected.

Dynamic Page as described above appears to be stuck in loading state. But as you can see multiple states are being printed out here which makes me think its an issue with multiple components mounting?

{
"loading": true,
"pageLoading": "news"
}
{
"loading": false,
"pageLoading": ""
}

code

import React, { Component } from 'react';
import Router from 'next/router';
import Loading from './Loading'
import { splitString } from '../../helpers/utils'

export default (WrappedComponent) => (
class MyWrapper extends Component {
constructor (props) {
super(props);
this.setLoading = this.setLoading.bind(this)
this.state = {
loading: false,
pageLoading: ''
}
}

componentDidMount() {
this.setState({
loading: false,
pageLoading: ''
})
}
componentDidUpdate() {
Router.onRouteChangeStart = url => {
/* returns the last part of the new url so that we know which page to make active in the loading component */
const newPage = splitString('/',url,1) !== undefined ? splitString('/',url,1):'...'
this.setLoading(newPage)
}
}

setLoading(newPage) {
this.setState({
loading: true,
pageLoading: newPage
})
}

render() {
return (
<div>
<pre>{JSON.stringify(this.state, null, '	')}</pre>
{
this.state.loading ?
<Loading page={this.state.pageLoading} />
:<WrappedComponent {...this.props} />
}
</div>
)
}
}
)

Your Environment

Tech
Version

next
^3.0.3

node
v8.4.0

OS
macOS 10.12

browser
chrome 61