How to implement links with redirect in next.js?

Question

I have the following react component which I am trying to implement in next.js.

React component:

import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";

import Dashboard from "../../pages/dashboard";
import Profile from "../../pages/profile";

function Layout(props) {
  return (
     <>
       <Switch>
          <Route
              exact
              path="/"
              render={() => <Redirect to="/app/dashboard" />}
           />
           <Route path="/app/dashboard" component={Dashboard} />
           <Route path="/app/profile" component={Profile} />
       </Switch>
     </>
 );
}

export default withRouter(Layout);

As I am very new to next. j's, I am not sure on, how can I handle the routes with redirect in next.js similar to above react component code.

Any help is appreciated?

Answer 1

You are using React-Router with NextJS which is possible but not the best practice.
NextJS router is a pretty complicated thing as it handles ClientSide and ServerSide routing simultaneously.
your /app/dashboard and /app/profile pages should render properly. If you want to redirect / to /app/dashboard you can use this trick inside the getInitialProps of the pages/index.js file.