Next.js Discord

Discord Forum

Where Is The Correct Place To Store Script Files

Answered
Eurasian Collared-Dove posted this in #help-forum
Open in Discord
Eurasian Collared-DoveOP
I'm trying to create a simple component that has a script attached to it, I would rather use the <Script /> tag in Next to separate out my script and my component so I don't have to deal with a huge useEffect statement, however, when trying to set the src attribute for the script I'm getting a GET http://localhost:3000/@/scripts/fullscreenShaderLogic.ts net::ERR_ABORTED 404, Not Found error. What is the correct way to store scripts in my project and then import them correctly?
Currently my code is:
//src/app/componenets/FullScreenShader.tsx
export default const FullScreenShader = () => {
return (
//...
<Script src={`@/scripts/fullscreenShaderLogic.ts`} />
//...
)
}

the script I'm trying to link to is stored in 
src/app/scripts/fullscreenShaderLogic.ts

and is a simple console.log, what is the correct way to store this file in my project and link it?
Answered by riský
can i ask why you don't import file and then use it in a useEffect
View full answer

11 Replies

riský
can i ask why you don't import file and then use it in a useEffect
Answer
riský
like does it cause problems? (that you mentioned)
but its prob because nextjs script doesn't care about the link ig
Eurasian Collared-DoveOP
like create the function inside of the js, import func from "scripts/logic" and useEffect(() => {
func();
}
?
riský
yeah
you will have all the window apis there
and it would be bundled with nextjs (including TS)
and if you want, you can make a component just for importing it (and its the only purpose is to be client component and use it)
Eurasian Collared-DoveOP
yea perfect that works, I'm not sure why the path wasn't working before but for the time being that's pretty clean, just having a useEffect in the top of the component calling that functin isn't too confusing, I appreciate the help!