Next.js Discord

Discord Forum

How to solve this routing conflict? (pages router)

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Avatar
Transvaal lionOP
Expressed in React Router's way, the routes are:
- /need/add
- /need/:id
- /need/:id/proposals

However when I try localhost:3000/need/add it hits /need/[id]/index.tsx and considers add as a slug.

I have this project structure:
- /need/add.tsx
- /need/[id]/index.tsx
- /need/[id]/proposals.tsx
Answered by Transvaal lion
I am lost. I just resarted the server and the error is gone...
View full answer

47 Replies

Avatar
Ray
it should go to /need/add.tsx if you go to /need/add
what version of next are you using
Avatar
Transvaal lionOP
it doesn't
14.1
Avatar
Ray
I just init a new project and try it
it does
Avatar
Transvaal lionOP
Image
Avatar
Ray
check if you have middleware or any rewrite/redirect in next.config.js
Avatar
Transvaal lionOP
Image
Avatar
Ray
Image
Avatar
Transvaal lionOP
I am really gonna lose my mind lol
nothing!
Avatar
Ray
Image
Image
Avatar
Transvaal lionOP
perhaps paths: [] in index.tsx is the issue?
Image
Avatar
Ray
it still work with it
I just added that
Avatar
Transvaal lionOP
I am really baffled
Avatar
Ray
could you show the code
/need/add.tsx
/need/[id]/index.tsx
Avatar
Transvaal lionOP
Sure.
/need/[id]/index.tsx
export const getStaticProps: GetStaticProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer', 'needs']))
  }
});

export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
  console.log('triggered :(');
  return {
    paths: [], //indicates that no page needs be created at build time
    fallback: 'blocking' //indicates the type of fallback
  };
};

function Need() {
  const [needDetails, setNeedDetails] = useState<NeedType>();
  const router = useRouter();
  const id = router.query.id as string;

  useEffect(() => {
    const fetchAndSetNeedDetails = async () => {
      const need = await NeedsService.getNeedById(id);
      setNeedDetails(need.data);
    };

    fetchAndSetNeedDetails();
  }, [id]);

  return (
    <section className="bg-heroLightBlue">
      {needDetails ? (
        <div className="flex flex-col gap-4 py-10 md:flex-row md:items-start md:justify-center">
          <div className="w-full max-w-5xl">
            <NeedDetails needData={needDetails!} />
          </div>
          <div className="w-full md:max-w-[21.25rem]">
            <SideBarDetails setNeedDetails={setNeedDetails} needData={needDetails} />
          </div>
        </div>
      ) : (
        <Loading />
      )}
    </section>
  );
}

export default Need;
/need/add.tsx

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  console.log('I wish this would trigger :)');
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', ['common', 'navbar', 'footer']))
    }
  };
};

function AddNeed() {
  return (
    <h1>something</h1>
  )
}

export default AddNeed;
you're using the pages router?
Avatar
Ray
yes
comment out getStaticProps on both page and try again
Avatar
Transvaal lionOP
still hitting /need/[id]/index.tsx :(
Image
Avatar
Ray
do you have anything in next.config.js
Avatar
Transvaal lionOP
nothing apart from i18n configuration + react string mode
Avatar
Ray
try creating a page on /need/create.tsx
Avatar
Transvaal lionOP
it works...
function Create() {
  return <div>Create</div>;
}

export default Create;


lol...
#@??@#@?#@#@
Avatar
Ray
yes it should work
have you tried /next/add on different browser
Avatar
Transvaal lionOP
that shouldn't be relevant, but I did, nothing changed
how come add.tsx fails but create.tsx is okay?!
Avatar
Ray
not sure or could you share the repo
Avatar
Transvaal lionOP
I think I am getting somewhere... I just commented out almost all JSX of add.tsx and replaced it with dummy text, it worked
unfortunately not, I can't do that :(
Avatar
Ray
you mean this?
function AddNeed() {
  return (
    <h1>something</h1>
  )
}

export default AddNeed;
Avatar
Transvaal lionOP
I shared this because I thought it was equivalent to the code I had (it's really not)
it was naive of me
I am trying now to pinpoint where the error is coming from. So far it's coming from <Formik> it seems
import enUS from 'date-fns/locale/en-US';
import fr from 'date-fns/locale/fr';
import { TFunction } from 'i18next';
import { DayPicker } from 'react-day-picker';
import { useTranslation } from 'next-i18next';
import { Setter } from '@/types/others';
import RadioButtonField from '@/components/RadioButtonField';
import { useRouter } from 'next/router';

interface DateStepProps {
  selectedDate: Date;
  setSelectedDate: Setter<Date>;
  selectedDateOption: number;
  setSelectedDateOption: Setter<number>;
}

const dateOptions = (t: TFunction) => [
  { id: 1, label: t('add_need.date.option_1') },
  { id: 2, label: t('add_need.date.option_2') },
  { id: 3, label: t('add_need.date.option_3') }
];

function DateStep({
  selectedDate,
  setSelectedDate,
  selectedDateOption,
  setSelectedDateOption
}: DateStepProps) {
  const router = useRouter();
  const { t } = useTranslation();

  return (
    <section>
      <ul className="flex flex-col sm:flex-row sm:justify-between">
        {dateOptions(t).map((option: any, index) => {
          return (
            <li key={index} className="pl-2 pt-2 sm:p-3 sm:pt-4">
              <RadioButtonField
                label={option.label}
                checked={selectedDateOption === option.id}
                onChange={() => setSelectedDateOption(option.id)}
              />
            </li>
          );
        })}
      </ul>
      <div className="mt-2 flex justify-center sm:mt-10">
        {selectedDateOption !== 1 && (
          <DayPicker
            mode="single"
            fromDate={new Date()}
            required
            selected={selectedDate}
            modifiersClassNames={{ selected: 'my-selected-day' }}
            weekStartsOn={0}
            onDayClick={(day) => setSelectedDate(day)}
            {/* THIS BELOW! */}
            locale={router.locale === 'fr' ? fr : enUS}
          />
        )}
      </div>
    </section>
  );
}

export default DateStep;
Avatar
Transvaal lionOP
what the hell does the locale prop has to do with /need/[id]/index.tsx?!
Avatar
Transvaal lionOP
I am lost. I just resarted the server and the error is gone...
Answer
Avatar
Transvaal lionOP
@Ray truly appreciate your time.
Avatar
Ray
no prob