Issue 1:
I am using withRouter HoC as described in this snippet, however, I am still getting the error:

utils.js:26 Warning: the 'url' property is deprecated. https://err.sh/next.js/url-deprecated

[x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Code executes without the deprecation warning.

Current Behavior

The error mentioned above appears.

Steps to Reproduce (for bugs)

Import withRouter to your component

Refer any field from this.props.router

Export your component wrapped in withRouter HoC

When component is rendered, the deprecation error appears in console

Context

I am implementing Navigation component that is aware of the current route (to highlight the NavItem).

Your Environment

Tech
Version

next
6.0.0

node
9.11.1

OS
OSX 10.13.4

browser
Chrome Version 66.0.3359.139

Issue 2:
Expected Behavior

Works without problem.

Current Behavior

Errors with "material-ui": "^1.0.0-beta.44" and "next": "^6.0.0" tried a lot of configuration with .babelrc doesn't work as expected.

When I'm using material-ui component MuiThemeProvider and refresh page using browser refresh not all component are rendered properly and in console there is next warning:

Warning: Prop 'className' did not match. Server: "MuiTypography-root-246 MuiTypography-title-252 MuiTypography-colorInherit-265 PageComponent-flex-207" Client: "MuiTypography-root-44 MuiTypography-title-50 MuiTypography-colorInherit-63 PageComponent-flex-5"

Steps to Reproduce (for bugs)

Page component wich is container for whole app:

import React from 'react'
import PropTypes from 'prop-types'
import Head from 'next/head'
import Document from 'next/document'
import NavigationBottom from './navigation/bottom'
import { MuiThemeProvider, createMuiTheme, withStyles } from 'material-ui/styles'
import { Hidden } from 'material-ui'

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import IconButton from 'material-ui/IconButton'
import Link from 'next/link'
import Drawer from 'material-ui/Drawer'
import Divider from 'material-ui/Divider'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import { inherits } from 'util'

import { MenuList, MenuItem } from 'material-ui/Menu';
import PeopleIcon from '@material-ui/icons/People'
import FavoriteIcon from '@material-ui/icons/Favorite'
import Help from '@material-ui/icons/Help'
import blue from 'material-ui/colors/blue';

const muiTheme = createMuiTheme({
palette: {
primary: {
main: '#32be9e'
}
}
})

const drawerWidth = 210

const styles = theme => ({
root: {
flexGrow: 1,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
color: '#32be9e',
backgroundColor: 'white'
},
drawerPaper: {
position: 'relative',
width: drawerWidth,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
minWidth: 0, // So the Typography noWrap works
},
flex: {
flex: 1
},
toolbar: theme.mixins.toolbar,
});

class PageComponent extends Document {
static propTypes = {
isServer: PropTypes.bool,
title: PropTypes.string.isRequired,
children: PropTypes.element.isRequired,
classes: PropTypes.object.isRequired
}

static defaultProps = {
navigationVisible: true
}

computedHeadTitle() {
return this.props.title ? `${this.props.title} | Cureety` : 'Cureety'
}

render() {
let { classes, navigationVisible } = this.props
return (
<MuiThemeProvider theme={createMuiTheme({
palette: {
primary: blue,
},
})} >
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{this.computedHeadTitle()}</title>
<link rel='stylesheet' href='/static/custom.css' />
</Head>
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
<Typography variant="title" color="inherit" className={classes.flex}>
<Link href="/">
<a className="link-styleless">Cureety</a>
</Link>
</Typography>
<Link href="/help">
<IconButton
aria-haspopup="true"
color="inherit"
tooltip="Assistance">
<Help />
</IconButton>
</Link>
</Toolbar>
</AppBar>
<Hidden only={['xs']}>
{navigationVisible > 0 &&
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}>
<div className={classes.toolbar} />
<MenuList>
<Link href="/suivi">
<MenuItem>
<ListItemIcon>
<FavoriteIcon />
</ListItemIcon>
<ListItemText inset primary="Mon suivi" />
</MenuItem>
</Link>
<Link href="/profile">
<MenuItem>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText inset primary="Mon profile" />
</MenuItem>
</Link>
</MenuList>
<Divider />
<List></List>
</Drawer>
}
</Hidden>

<main className={classes.content}>
<div className={classes.toolbar} />
<Typography noWrap component="div">
<div>
{this.props.children}
</div>
</Typography>
</main>
{navigationVisible > 0 &&
<Hidden only={['sm', 'md', 'lg', 'xl']}>
<NavigationBottom />
</Hidden>
}
</div>
</MuiThemeProvider>
)
}
}

const Page = withStyles(styles)(PageComponent)

export default Page

Context

Your Environment

Tech
Version

next
^6.0.0

node
v8.9.3

OS
Windows 10

browser
Chrome Version 66.0.3359.139 (Build officiel) (64 bits)

etc

Connected issue, said to move question to another issue: #3983