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?

https://sergiodxa.com/articles/redirects-in-next-the-good-way/ — Yurui Zhang, Sep 19 '19 at 23:52
hope this helps https://www.raygesualdo.com/posts/2017/05/09/301-redirects-with-nextjs/ — karthikdivi, Sep 20 '19 at 06:55
https://stackoverflow.com/questions/58173809/next-js-redirect-from-to-another-page/58189897#58189897 — Afsanefda, Dec 05 '19 at 17:15

HosseinAgha · Answer 1 · 2019-12-03T19:50:02.170

0

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.

edited Dec 03 '19 at 19:50

answered Dec 03 '19 at 19:17

HosseinAgha

759
6
18

How to implement links with redirect in next.js?

1 Answers1