Where should I add my scripts? #78197
-
SummaryI want to add a basic I just added
This is the JS $(document).ready(function () {
$('.coming-soon, .coming-soon-overlay').hover(
function () {
$('.coming-soon').css({
'filter': 'blur(0px)',
'animation': 'comingSoonAnimation 0.5s ease 0s 1 normal forwards'
});
$('.coming-soon-overlay').css('opacity', '0');
},
function () {
$('.coming-soon').css({
'filter': 'blur(7px)',
'animation': 'none'
});
$('.coming-soon-overlay').css('opacity', '1');
}
);
});Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
I think one way to do this, is to just import it, making sure to add Like, if I have: 'use client'
if (typeof window !== 'undefined') {
console.log("hello")
}Then, on my page.tsx I could do: import '../scripts/my.script'
export default function Home() {
return (
<SomeUI />
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! It seems like the import itself should work since there are no errors, and Here is my script: 'use client'
if (typeof window !== 'undefined') {
$(document).ready(function () {
$('.coming-soon, .coming-soon-overlay').hover(
function () {
$('.coming-soon').css({
'filter': 'blur(0px)',
'animation': 'comingSoonAnimation 0.5s ease 0s 1 normal forwards'
});
$('.coming-soon-overlay').css('opacity', '0');
},
function () {
$('.coming-soon').css({
'filter': 'blur(7px)',
'animation': 'none'
});
$('.coming-soon-overlay').css('opacity', '1');
}
);
});
}And this is the import import './scripts/coming-soon.js'As I said before the import in theory should work, because when I give it a wrong path it warns me about it. |
Beta Was this translation helpful? Give feedback.
-
|
Intersting... mine does work, buth with a quirk. I had left in a |
Beta Was this translation helpful? Give feedback.
-
|
So, I have: import Script from "next/script";
import "../scripts/my.script";
export default function Home() {
return (
<>
<Script src="/fooo.js" />
<div>Scripts</div>
</>
)
}And that gives: 
And the script: 'use client'
import $ from 'jquery'
if (typeof window !== 'undefined') {
console.log("hello")
$(document).ready(function () {
console.log("ready")
});
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! Yes, it works the same way for me. Strange though... I tested it, and it also works with an empty |
Beta Was this translation helpful? Give feedback.
-
|
I know, we'll look more into this later on. Did you ever try out, https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client ? it is new to me, haven't had a chance to give it a go. I don't think it is, necessarily, designed, for this use case, but you never know... sometimes one has to step out of the design barriers. |
Beta Was this translation helpful? Give feedback.
-
Not yet, but thanks for the idea! |
Beta Was this translation helpful? Give feedback.
-
|
@DemeSzabolcs Can I ask you a question? Why do you prefer to use script for this situation? It's better to use CSS rather than using JavaScript. It's more performance and server-component-friendly. What did you think ? |
Beta Was this translation helpful? Give feedback.
-
|
I tried this with CSS only, but it's complicated, and I don't think it's achievable with CSS only. I will also extend this script so that when no hover is available (on mobiles), clicks will also trigger the behaviour. Besides this, I'm new to Next JS, so I want to learn best practices, like what's the best way to add a script like this. |
Beta Was this translation helpful? Give feedback.
So, I have:
And that gives:
And the script: