Next.js Discord

Discord Forum

Blank Page When I Add Query to URL

Answered
Large oak-apple gall posted this in #help-forum
Open in Discord
Large oak-apple gallOP
I have a user panel. I am also using JWT token. I am checking the validity of JWT token with Middleware. If the token is not available, I redirect to the login page.

There is no problem with all this. But when I refresh the login page with the query, the page turns white.

Example URL: http://localhost:3000/dashboard?errorMsg=expiredToken&redirectURL=%2Fdashboard

When I refresh the page it looks like this:

https://i.imgur.com/FwBGd65.png

My codes:

//middleware.js
import { isAuthPages } from "components/libs/authPages";
import { verifyJwtToken } from "components/libs/verifyJwt";
import { NextResponse } from "next/server";

export async function middleware(request) {
  const { url, nextUrl, cookies } = request;
  const { value: token } = cookies.get("user") ?? { value: null };

  const hasVerifiedToken = token && (await verifyJwtToken(token));
  const isAuthPageRequested = isAuthPages(nextUrl.pathname);

  if (isAuthPageRequested) {
    if (!hasVerifiedToken) {
      const response = NextResponse.next();
      return response;
    }
    const response = NextResponse.redirect(new URL("/dashboard", url));
    return response;
  }

  if (!hasVerifiedToken) {
    const searchParams = new URLSearchParams(nextUrl.searchParams);
    searchParams.set("redirectURL", nextUrl.pathname);

    const response = NextResponse.redirect(
      new URL(`/login?msg=expiredToken&${searchParams}`, url)
    );
    response.cookies.delete("user");
    return response;
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*", "/login"],
};


//pages/login/index.jsx
import React from "react";
import Login from "components/Login";

function Home() {
  return (
    <>
      <Login />
    </>
  );
}
export default Home;


function Login() {
  const dispatch = useDispatch(); // redux
  const [showPassword, setShowPassword] = useState(false);
  const theme = useTheme();

  const handleClickShowPassword = () => setShowPassword((show) => !show);

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  // form validation rules
  const validationSchema = Yup.object().shape({
    username: Yup.string().required("Kullanıcı adı gereklidir."),
    password: Yup.string().required("Åžifre gereklidir."),
    companycode: Yup.string().required("Åžirket kodu gereklidir."),
  });
  const formOptions = { resolver: yupResolver(validationSchema) };

  // get functions to build form with useForm() hook
  const { register, handleSubmit, formState } = useForm(formOptions);
  const { errors } = formState;

  function onSubmit({ username, password, companycode }) {
    const loginData = {
      username: username,
      password: password,
      companycode: companycode,
    };
    return dispatch(authActions.login(loginData));
  }

  return (
    <>
      <Head>
        <title>Marka Ä°smi - GiriÅŸ Yap</title>
      </Head>
      <Container
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          overflow: "hidden",
          minHeight: "100vh",
          minWidth: "100vw",
        }}
      >
        <form id="login" onSubmit={handleSubmit(onSubmit)}>
          ...
        </form>
      </Container>
    </>
  );
}

export default Login;
Answered by Large oak-apple gall
let persistor = persistStore(store, {}, function () {
  persistor.persist();
});

This code solved my problem.
View full answer

6 Replies

Large oak-apple gallOP
Without the query the page looks like this:
https://i.imgur.com/XwS6p48.png
Large oak-apple gallOP
I found this post: https://stackoverflow.com/questions/75388390/next-js-gives-blank-page-when-i-try-to-acces-a-page-with-an-url-parameter

The person who wrote this article uses Redux and redux-persist like me. I didn't think this problem could occur because of redux or redux-persist. Here is my App file:

export default function App(props) {
  const [theme, colorMode] = useMode();
  let persistor = persistStore(store);
  const { Component, pageProps } = props;

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <AppContextProvider>
          <Head>
            <meta charSet="UTF-8" />
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1.0"
            />
          </Head>
          <ColorModeContext.Provider value={colorMode}>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              <NextNProgress />
              <Component {...pageProps} />
              <AlertMsg />
            </ThemeProvider>
          </ColorModeContext.Provider>
        </AppContextProvider>
      </PersistGate>
    </Provider>
  );
}
Large oak-apple gallOP
Any idea?
Large oak-apple gallOP
up
Large oak-apple gallOP
up
Large oak-apple gallOP
let persistor = persistStore(store, {}, function () {
  persistor.persist();
});

This code solved my problem.
Answer