Step-by-Step Guide on Redirecting NextJS Page to SPA

As I work on developing a SaaS application with Next JS, my goal is to leverage SSG for SEO purposes on landing pages and pricing. However, when it comes to the actual application, I prefer using a SPA due to its high interactivity. Initially, I am reluctant to use SSR as I have more experience with SPA and want to avoid potential server costs.

My aim is for https://example.com/ (in the pages folder) to display the SPA (specifically by routing to SPA/index.tsx, which serves as the default create react app entry point) once the user is logged in.

In summary:

pages/index.tsx
imports...

export default function Home() {
  if (isLoggedIn) {
    route to SPA
  }
  
  return <LandingPage>
}

Illustrative file structure:

Pages

  • index.tsx
  • _app.tsx
  • _document.tsx
  • dashboard

SPA

  • index.tsx
  • App.tsx

I would appreciate any advice or guidance on how to achieve this setup.

Thank you :)

reactjsnext.jssingle-page-application

Answer №1

The approach I ultimately took was incorporating a subdomain into my solution.

For instance, I decided to host the primary app with various landing pages on example.com, while hosting the React app on app.example.com. After a user logs in, they are redirected to app.example.com, where their authentication session remains accessible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with opacity transitions in Chrome on React application

I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...

htmlcssreactjs

Error occurs in React Native when trying to import routes due to type mismatch

My react native app is running on my physical device, but I encountered an error when importing routesContainer in my app.js. Can anyone shed some light on why this error is occurring? TypeError: Super expression must either be null or a function [Mon Oct ...

javascriptreactjsreact-native

Exploring the contrast between materialize-css and material UI libraries

After exploring the home pages of materializecss and materialUI, I noticed that materializecss describes itself as a modern responsive front-end framework based on Material Design, while materialUI mentions React components that implement Google's Mat ...

reactjsmaterial-designmaterial-uimaterialize

Leveraging Typekit / Adobe Fonts with @next/font

The current Next.js Font Optimization documentation and the @next/font API Reference provide instructions on incorporating Google Fonts and local font files, however; they do not mention the recommended approach for implementing Typekit / Adobe Fonts. Wha ...

next.jstypekit

Modifying the font style and color of text within the table header - Material Table version 0.19.4

Recently, I began using React and Material UI but have encountered an issue with modifying the color and font of text in the table header. Despite attempting to override it, the default style remains unchanged. It has been mentioned that utilizing "heade ...

cssreactjsmaterial-ui

Trigger useEffect after prop has been changed

I'm trying to figure out how I can avoid running an API call in my component on initial rendering. The prop needed for the API call should be updated only after a form submission. Although I have included the prop in the dependency array of useEffect, ...

javascriptreactjsuse-effectreact-propsuse-state

What is the best way to navigate to a different URL using useRouter in Next.js?

I have a simple search bar component in my Next.js application that I want to include in the main navbar and also use on a dedicated search page. The goal is to redirect the user to "/search?q=INPUTVALUE" upon submission. However, instead of going to the s ...

reactjsformsnext.js

Using React and Material-UI to dynamically populate a table with data retrieved from

Material ui table utilizes data in a specific format. rows: [ createData(1, "dashboard", "details"), createData(2, "product", "product details"), ].sort((a, b) => (a.id < b.id ? -1 : 1)) When the API responds with data stored in st ...

javascriptreactjsmaterial-ui

Managing form values conditionally using react-hook-form

Whenever the manufacturerWatchValue changes, I need to delete the model's value after the form has been initialized. However, the model loses its value during form initialization because the initialized variable is in the dependency list. Therefore, ...

reactjsreact-hook-form

The ReactDOM.createPortal modal has been successfully mounted onto the DOM, however, there seems to be no visible content

This project utilizes TypeScript and Next.js. Within it, there is a Modal component: interface ModalProps { onCancelModal: () => void; onAcceptModal: () => void; acceptEnabled: boolean; isLoading?: boolean; title: string; } const Modal: Re ...

reactjstypescriptmodal-dialognext.jsreact-portal

"Using Sentry in conjunction with Next.JS to enhance application security and optimize

Is there a way to assign the error.digest as a tag to all reported errors? scope.setTag('digest', error.digest) I noticed that in the sentry.server.config.ts and Sentry.init files we can customize the beforeSend hook, but I couldn't locate ...

next.jssentry

What is the best way to implement a new token/session in next-auth server-side after customizing the signOut method?

Using Next-Auth's credentials provider, the user is signed in by setting their information into a token and then into a session. Cookies are also set. To sign out, I customized the default signOut Method [...nextauth].ts events: { async signOut( ...

next.jsnext-auth

``The powerful combination of NextAuth and OneLogin integrated into a NodeJS and Express API

This pertains to a previous inquiry I made concerning my project. The scenario is as follows: I have developed a NextJS application that utilizes NextAuth with OneLogin for authentication and stores session data in Mongo Atlas. The app is hosted on Vercel. ...

node.jsmongodbnext.jsnext-authonelogin

Press the key to navigate to a different page

I have an input field for a search box. I want it so that when I enter my search query and press enter, the page navigates to another page with the value of the input included in the URL as a query string. How can I achieve this functionality? Thank you ...

javascriptnode.jsreactjstypescriptreact-router

Issue with Material-ui: Incorporating the <Divider> component disrupts the grid layout

I am facing a frustrating problem for which I can't seem to find a solution. As a newcomer to material-ui, it appears that something important is eluding me... All I need is a simple divider between the grid items without disrupting the grid layout s ...

reactjsmaterial-ui

Typescript MUI Autocomplete: Can you specify the parameter type of the PaperComponents function?

If you use MUI's Autocomplete, there is a property called PaperCompomponent that allows you to pass your own react component. This property is a function with properties as a parameter, which can then be used to pass on to your custom component. In T ...

javascriptreactjstypescriptmaterial-ui

Is NextJS rendering solely on the server, or is it capable of rendering on both

Within my users.js JSX file, I have an exported component that looks like this: ... return <MainContainer keywords="users"> export default Users During the process of SSR/SSG, the browser displays the users HTML (comprising of <li> t ...

javascriptnext.js

Issue with Typescript not recognizing default properties on components

Can someone help me troubleshoot the issue I'm encountering in this code snippet: export type PackageLanguage = "de" | "en"; export interface ICookieConsentProps { language?: PackageLanguage ; } function CookieConsent({ langua ...

javascriptreactjstypescriptreact-props

Combining Overrides in Material UI (React): Mastering the Art of Overwriting Theme and Component Styles

When attempting to customize both the global theme styling and component styling simultaneously in Material UI, I encountered an issue. Initially, I successfully implemented the following code: import { createTheme } from '@mui/material/styles'; ...

reactjsmaterial-ui

Sending information across React context

I've encountered a challenge when trying to transfer data from one context to another in React. The job data I receive from a SignalR connection needs to be passed to a specific job context, but I'm unsure of the best approach for achieving this. ...

javascriptreactjssignalrreact-context