41

I'm developing a Next.JS app where a user should login to see the content.I want to redirect the user to '/' if their username and password are correct.However my implementation seems not working.

I searched on SO for questions regarding this,but all of them were talking about redirecting with getInitialProps but it doesn't help me since I want to redirect user from my custom express server.

Login.js

 async handleSubmit(event) {
  event.preventDefault()
  const { username, password } = this.state

  try {
    const response = await fetch('/log_in', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
  }

 catch (error) {
    console.log(error)
  }
}  

server.js

app.post('/log_in', (req,res) => {
    console.log(`login form data`);
    console.log(`Username : ${req.body.username}`);
    console.log(`password : ${req.body.password}`);
    if(req.body.username == "user" && req.body.password == "123"){
        res.redirect('/')
    }
}) 
0

3 Answers 3

82

This is now possible on Next.js 10+ without having to do any sort of response header manipulation directly. Use getServerSideProps or getStaticProps and return a redirect key as the only value from it if your conditions are met:

export async function getServerSideProps(context) {
  if(context.req.body.username == "user" && context.req.body.password == "123"){
    return {
      redirect: {
        permanent: false,
        destination: "/"
      }
    }
  }
}
2
  • 3
    Worth mentioning that for this to work Next also needs a default export of a page component. Eg, export default function Redirect() { }
    – rgdigi
    Jul 3, 2021 at 12:38
  • 1
    @rgdigi Good point - some functional component must be defined and exported. Another unmentioned bit to this is that you can perform any logic in that block which you need, not just checking request params; e.g., you could have the server make a request for a valid session first and evaluate based on that instead.
    – bsplosion
    Jul 6, 2021 at 15:42
6

It's a good idea for SEO to redirect server side if you can (not for login like the questions mention).

But for things like user language etc it's probably a good idea to use server side redirects like this. ----- REMOVED since it was bad code --------

Update, I ended up with this as I did have some problems with headers already sent. Please let me know how this can be fixed as it's not the most ideal (although Google does understand it according to this article https://www.seroundtable.com/google-meta-refresh-redirects-work-25335.html)

export default function HomePage({ language }) {
  return (
    <Head>
      <title>-</title>
      <meta httpEquiv="refresh" content={`0;url=/${language}/discover/0`} />
    </Head>
  );
}

Update Nextjs is adding native support there is an RFC available: https://github.com/vercel/next.js/discussions/17078

0

To those who are looking for GLOBAL server side redirects

  • The problem with getServerSideProps. It cannot be used inside _app.js file. This means we have to duplicate code for every page copying if (...) { ... return { redirect: {...} } } blocks to every private page's getServerSideProps function

In _app we need to create custom MyApp component, because getInitialProps doesn't work on _app by default as it said here

// _app.tsx
import type { AppContext, AppProps } from "next/app";
import App from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = (appContext: AppContext) => {
  const { res, query } = appContext.ctx;
 
  // Load the page getInitiaProps
  const pageProps = App.getInitialProps(appContext);
  
  if (query.logged !== 'true') {
    // On the server, we'll use an HTTP response to
    // redirect with the status code of our choice.
    // 307 is for temporary redirects.
    res.writeHead(307, { location: `/app/login` });
    res.end();
    return {};
  }
  
  return { ...pageProps };
};

export default MyApp;

Example:

  • When I reload the page /app?logged=true, I stay on the page(or any other page with logged=true flag).
  • When I reload the page /app, I'm redirected to the login page

Ref: https://github.com/vercel/next.js/discussions/14547#discussioncomment-387271

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.