Next.js Discord

Discord Forum

Export app to HTML/CSS

Unanswered
Nile Crocodile posted this in #help-forum
Open in Discord
Avatar
Nile CrocodileOP
Hey, I have a webapp written by someone else that I'm trying to export to pure HTML/CSS. I don't know Next JS, and the code was written by someone else. It has a lot of dynamic components and uses Clerk too. But I don't mind if the dynamic components break.
npm run build gives errors but npm run dev works fine. Because the app isn't building, I'm unable to export it. I assume this is because of the dynamic components. Is there any way to get past this? Or do I share more detailed errors?

57 Replies

as I said
npm run build gives errors but npm run dev works
so I can't export it
Avatar
Palomino
what error
show code error
or photo
Avatar
Nile CrocodileOP
./app/(auth)/sign-up/[[...sign-up]]/page.tsx:86:15
Type error: Type '{ signUpWithEmail: ({ emailAddress, password, firstName, lastName, username, }: { emailAddress: string; password: string; firstName: string; lastName: string; username: string; }) => Promise<Element | undefined>; clerkError: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'signUpWithEmail' does not exist on type 'IntrinsicAttributes'.

  84 |           {!verifying ? (
  85 |             <SignupForm
> 86 |               signUpWithEmail={signUpWithEmail}
     |               ^
  87 |               clerkError={clerkError}
  88 |             />
  89 |           ) : (
Static worker exited with code: 1 and signal: null
although it does say, "Compiled Successfully" right above this
Image
does that mean that my code built successfully?
if so, shouldn't I be able to just export?
Avatar
Nile CrocodileOP
okay nevermind
This was an error in the code
so I managed to fix that
but there seem to be issues while exporting
> Build error occurred
Error: Page "/edit-event/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
    at /home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/build/index.js:1297:59
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Span.traceAsyncFn (/home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/trace/trace.js:154:20)
    at async Promise.all (index 12)
    at async /home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/build/index.js:1175:17
    at async Span.traceAsyncFn (/home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/trace/trace.js:154:20)
    at async /home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/build/index.js:1098:124
    at async Span.traceAsyncFn (/home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/trace/trace.js:154:20)
    at async build (/home/turingtested/Documents/testingforks/zieln-frontend/node_modules/next/dist/build/index.js:368:9)
is there any way I can get rid of all dynamic routes?
Avatar
Rose-breasted Grosbeak
delete them 😂
Avatar
Nile CrocodileOP
all of them?
manually?
I'm completely new to NextJS, how do I identify dynamic routes?
Avatar
Rose-breasted Grosbeak
do you absolutely not want the dynamic routes or don't want them to be dynamic?
Avatar
Nile CrocodileOP
I'm trying to remake the site in flask
I'd like to keep the frontend
and redo the backend in flask
so if I can just export the thing
and have a non-functional HTML/CSS page
that would do the job
Avatar
Rose-breasted Grosbeak
so you don't want the routes to be dynamic.
Avatar
Nile CrocodileOP
yes
Avatar
Rose-breasted Grosbeak
dynamic routes use [abc] name.

Read the docs linekd above, they mention how to deal with them
you'd need to make some changes to add api calls and stuff of course
Avatar
Nile CrocodileOP
so do I just remove everything inside square brackets?
wouldn't that make the errors worse
Avatar
@Nile Crocodile so do I just remove everything inside square brackets?
Avatar
Rose-breasted Grosbeak
no that's in the file name
Avatar
Nile CrocodileOP
I'm sorry but I'm really confused. [abc] is the filename right?
Avatar
Rose-breasted Grosbeak
yes
Avatar
@Nile Crocodile so do I just remove everything inside square brackets?
Avatar
Rose-breasted Grosbeak
you'd delete all the UI logic/markup too
Avatar
Nile CrocodileOP
oh nvm I wouldn't want that
they're only covering configuration and image optimisation
Avatar
Rose-breasted Grosbeak
which version of nextjs are you using btw?
Avatar
Nile CrocodileOP
14.2.23
Avatar
Rose-breasted Grosbeak
and are you using the newer app router, or older pages router?

(there should be an app directory at the root level or in src directory)
Avatar
Nile CrocodileOP
yup
There's an app directory
Image
Avatar
Rose-breasted Grosbeak
Since static export doesn't support dynamic routes, you need to generate some static pages for the dynamic routes.

You do that by this function (as the error says) https://nextjs.org/docs/app/api-reference/functions/generate-static-params
Avatar
@Nile Crocodile also I did look into the docs
Avatar
Rose-breasted Grosbeak
Read the deploying part, it has an example output.

https://nextjs.org/docs/app/building-your-application/deploying/static-exports#deploying
so do I add this in the page.tsx for every single component?
would that statically generate the page?
Avatar
Rose-breasted Grosbeak
yes, check how that function works
Avatar
Nile CrocodileOP
ooh okay
thank you so much