Issue 1:
Bug report

Unable to navigate to another route when using @zeit/next-sass in version 8.0.4.

To Reproduce

On clicking the link from index page, it doesn't route to about page(when using @zeit/next-sass). But after removing (@zeit/next-sass), it works as expected.

This unusual behaviour happens on client side. When going directly to the about page, it works but still navigation does not work on client side.

/pages/index.js

import Link from "next/link";
const Index = () => (
<div>
<Link href="/about">
<a>About Page</a>
</Link>
<p>Hello Next.js</p>
</div>
);

export default Index;

/pages/about.js

import "../styles/about.scss";
function About() {
return (
<div>
<p className="about">This is the about page</p>
</div>
);
}
export default About;

styles/about.scss

$font-size: 50px;

.about {
font-size: $font-size;
}

next.config.js

const withSass = require("@zeit/next-sass");

module.exports = withSass();

Expected behavior

It should be able to route to about page from index page on client side.

System information

OS: macOS

Version of Next.js: 8.0.4

Node version : v10.13.0

Issue 2:
Feature request

Is your feature request related to a problem? Please describe.

one issue I've run across is a simple routing solution for dynamic path segments.

Describe the solution you'd like

I'd like to have a function like this that next.js provides to me

function buildAsPath(pathname, params = {}) {
let nextPath = pathname;
const query = JSON.parse(JSON.stringify(params));
for (const key in query) {
nextPath = nextPath.replace(
new RegExp(`\\[(${key})\\]`, 'g'),
(_match, p1) => {
const value = query[p1];
delete query[p1];
return value;
}
);
}

return { pathname: nextPath, query };
}

so when I have a URL like /posts/[id]/comments/[commentId] I can just do

router.push(router.pathname, buildAsPath(router.pathname, {
id: router.query.id,
commentId: comment.id
}))

Describe alternatives you've considered

What I started with:

function buildPathname(pathname, { unit, city, state, role }) {
switch (pathname) {
case '/jobs/roles/[role]/units/[unit]':
if (typeof unit === 'string' && unit.length !== 0) {
return '/jobs/roles/[role]/units/[unit]';
} else if (typeof city === 'string' && typeof state === 'string') {
return '/jobs/roles/[role]/locations/[state]/[city]';
} else if (typeof state === 'string') {
return '/jobs/roles/[role]/locations/[state]';
} else if (typeof role === 'string') {
return '/jobs/roles/[role]';
}
case '/jobs/roles/[role]/locations/[state]': // eslint-disable-line no-fallthrough
case '/jobs/roles/[role]/locations/[state]/[city]':
if (typeof city === 'string' && typeof state === 'string') {
return '/jobs/roles/[role]/locations/[state]/[city]';
} else if (typeof state === 'string') {
return '/jobs/roles/[role]/locations/[state]';
} else if (typeof unit === 'string' && unit.length !== 0) {
return '/jobs/roles/[role]/units/[unit]';
} else if (typeof role === 'string') {
return '/jobs/roles/[role]';
}
// eslint-disable-line no-fallthrough
default:
throw new TypeError('invalid arguments for buildPathname()');
}
}
function buildAsPathname(nextPathname, { unit, city, state, role }) {
switch (nextPathname) {
case '/jobs/roles/[role]/units/[unit]': {
const query = {};
if (typeof city === 'string') {
query.city = city;
}
if (typeof state === 'string') {
query.state = state;
}

return {
pathname: `/jobs/roles/${role}/units/${unit}`,
query,
};
}
case '/jobs/roles/[role]/locations/[state]': {
const query = {};

if (typeof unit === 'string' && unit.length !== 0) {
query.unit = unit;
}
return {
pathname: `'/jobs/roles/${role}/locations/${state}'`,
query,
};
}
case '/jobs/roles/[role]/locations/[state]/[city]': {
const query = {};
if (typeof unit === 'string' && unit.length !== 0) {
query.unit = unit;
}
return {
pathname: `'/jobs/roles/${role}/locations/${state}/${city}'`,
query,
};
}
case '/jobs/roles/[role]': {
const query = {};
if (typeof unit === 'string' && unit.length !== 0) {
query.unit = unit;
}

return {
pathname: `/jobs/roles/${role}`,
query,
};
}
default:
throw new TypeError('invalid arguments for buildAsPathname()');
}
}

function navigate(props, { role, unit, state, city }) {
if (typeof role === 'string') {
role = role.toLowerCase();
}

if (typeof city === 'string') {
city = titleCaseToKebabCase(city);
}

if (typeof state === 'string') {
state = state.toLowerCase();
}

if (typeof unit === 'string') {
unit = unit.toLowerCase();
}

if (
role !== props.router.query.role ||
unit !== props.router.query.unit ||
state !== props.router.query.state ||
city !== props.router.query.city
) {
const pathname = buildPathname(props.router.pathname, {
role,
unit,
state,
city,
});

const asPath = buildAsPathname(pathname, {
role,
unit,
state,
city,
});

props.router.push(pathname, asPath);
}
}

Additional context

Add any other context or screenshots about the feature request here.