Complicated Dynamic Routing

[malikolabiyi]

Hello,

I am building a link shortener with NextJS, and having a good experience so far!

But there's an issue I encountered, I want to have website.com/linkToken, but I have some pages with the same routing pattern too, so they conflict and the linkToken gets build each time I visit other pages, this explains better:

pages/signup.tsx => website.com/signup
pages/[linkToken].tsx => website.com/HgYwr2

// I don't want to do:
pages/signup.tsx => website.com/signup
pages/p/[linkToken].tsx => website.com/p/HgYwr2

So is there any way to exempt some special pages from getting build?

[alanqchen]

Explicit pre-defined routes will take precedence over the dynamic routes, so this shouldn't be an issue. Maybe there's something else wrong?

[malikolabiyi]

No, it's not an error, just like an info.

So when you go to /signup, two building page info show up:

Building /signup

Buidling /[linkToken]

[alanqchen]

Do you use Router.push, Router.write, or any other redirect logic in /signup? It seems that the router correctly builds the correct page but then gets redirected.

[malikolabiyi]

No, I didn't do anything related to that... I confirmed it is kind of like treating /signup as /[linkToken], passing "signup" as the linkToken here (confirmed by logging the context in the getServerSideProps).

[alanqchen]

Is it possible to share the code you have for /signup, it should only show build page: /[linkToken] if it truly never reached the actual /signup page.

[malikolabiyi]

It's a big large, nothing special, just a page rendering a Formik form...

// Signup.tsx
export default function Signup() {
	return (
		<AuthPageLayout title="Create an Account" process="signup">
			<SignupForm />
		</AuthPageLayout>
	);
}

// [linkToken].tsx
const link = () => {
	return 'Hehe';
};

export const getServerSideProps: GetServerSideProps = async (context) => {
	console.log(context.params);
	return { props: {} };
};
export default link;