Can't import scripts and EVERYTHING ELSE
Unanswered
Madeiran sardinella posted this in #help-forum
Madeiran sardinellaOP
I'm very new to using next.js, or even node.js or any web app framework in general. I'm currently trying to convert my app from normal html/css/js to working in a next.js project with .tsx. My issue is that I can't, for whatever reason, import my old js scripts into the project and I get a 404 error. If I use express to stage them, I can get them to show up on localhost but then the page throws error "cannot read properties of undefined 'clientModules'" and this is after deleting/reinstalling the package-lock and node modules folder. I'm very very new, so I have a few other questions I'm curious about
1. How do I start on my backend? What languages do I use? Where do I put them in the filetree
2. What is the difference between public files and private? How do I make files that are visible only to certain users and can be uploaded/deleted by them, like profile pictures and posts, etc
3. What is the "root" of the project? For example import statements use "../path" and seem to path relative to the current file, while <Script src="/path"> has some set place where it is pathing to
4. Why is it so hard to stage my js scripts on the website to use them in my pages? I'm currently trying to using express but I get error after error and nothing seems to work
5. Where shuold I actually be putting scripts? I'm not used to writing in typescript, though I know its very similar to js, should I just write my code in each "html" (tsx file)?
6. What is my filetree supposed to look like? I want a frontend and backend, with assets like fonts, styles, scripts. Do I put all scripts and css files in one folder for all, or do I put each js and css file next to its html page? What is the filetree supposed to look like?
As you can probably imagine, my biggest difficulties stem from not knowing what the structure of a project is supposed to be: where do certain files go, what is the purpose of a public folder, do my scripts go in there or in the app folder, etc?
Help is much appreciated
1. How do I start on my backend? What languages do I use? Where do I put them in the filetree
2. What is the difference between public files and private? How do I make files that are visible only to certain users and can be uploaded/deleted by them, like profile pictures and posts, etc
3. What is the "root" of the project? For example import statements use "../path" and seem to path relative to the current file, while <Script src="/path"> has some set place where it is pathing to
4. Why is it so hard to stage my js scripts on the website to use them in my pages? I'm currently trying to using express but I get error after error and nothing seems to work
5. Where shuold I actually be putting scripts? I'm not used to writing in typescript, though I know its very similar to js, should I just write my code in each "html" (tsx file)?
6. What is my filetree supposed to look like? I want a frontend and backend, with assets like fonts, styles, scripts. Do I put all scripts and css files in one folder for all, or do I put each js and css file next to its html page? What is the filetree supposed to look like?
As you can probably imagine, my biggest difficulties stem from not knowing what the structure of a project is supposed to be: where do certain files go, what is the purpose of a public folder, do my scripts go in there or in the app folder, etc?
Help is much appreciated
229 Replies
Madeiran sardinellaOP
Ok I can put them in public
But then where do I put stuff that isnt public
I will have to eventually right?
app directory is the main website
client and server
public if for public resources
and idk why you have both src and app folders on the root folder
Madeiran sardinellaOP
In the same file, why does this work:
And this throws an error:
import React from 'react';
import Head from 'next/head';
import Script from 'next/script';
import Link from 'next/link';
import NavBar from '../components/NavBar'; // Adjust the path as needed
import '../../styles/index.css';
import '../../styles/landingnavbar.css';
import '../../styles/fonts.css';And this throws an error:
<Script src="/scripts/gsapIndex.js" strategy="lazyOnload" />
<Script src="/scripts/navbar.js" strategy="lazyOnload" />
<Script src="/scripts/animIndex.js" strategy="lazyOnload" />
<Script src="/scripts/slideshow.js" strategy="lazyOnload" />@Diamond Master and idk why you have both src and app folders on the root folder
Madeiran sardinellaOP
I had different sources telling me what to do
Do I just delete them
bc the scripts are not routed
@Madeiran sardinella I had different sources telling me what to do
you can use one or the other
but not both of them
Madeiran sardinellaOP
So is the "root" my-app or is it my-app/public?
my-app
Madeiran sardinellaOP
Ok
only app and public can be accessed from outside
Madeiran sardinellaOP
So then when I load localhost:3000/script.js it doesnt work?
if you put it into public it will
@Diamond Master only app and public can be accessed from outside
Madeiran sardinellaOP
Wait so how come my css still works
Because thats not in public, its in my-app
i think it does use it when compiling
then serve it
Madeiran sardinellaOP
The import is in my-app/app/index/page.tsx and is importing my-app/styles/style.css
btw, if you want to use html scripts, i suggest you just add logic into the app's file
Madeiran sardinellaOP
Ok
So I would take all my old js files
And just paste the code on top of the html code
In the tsx file
tsx is basically javascript but way more advanced
Madeiran sardinellaOP
Right
So it reads js
how did you make the project btw
Madeiran sardinellaOP
I think I did create-next-app@latest with npm
I think I left typescript disabled
Because when I enabled it
It broke
i suggest you redo it and use the default folders
and enable ts pls
Madeiran sardinellaOP
Ill try that
@Madeiran sardinella It broke
did you install typescipt as a global module?
Madeiran sardinellaOP
Do I use app router?
npm install -g typescript
@Diamond Master did you install typescipt as a global module?
Madeiran sardinellaOP
Just did this
Will try again
If that doesnt fix thigns Ill just make a new one
oh, and you can use bun
Madeiran sardinellaOP
Its annoying because Im trying to learn from youtube tutorials in full stack and they all use different directories and shit
it's faster than nodejs
Madeiran sardinellaOP
How did you learn
And if I switch to bun isnt that another learnign curve
copy paste and dissecting code
@Madeiran sardinella And if I switch to bun isnt that another learnign curve
it's literally npm but faster
istead of installing packages with npm i, you use bun add
Madeiran sardinellaOP
Atp I should just switch to fucking linux
This stuff is not really built for windows
it is
Madeiran sardinellaOP
I miss pacman
i am coding on windows lol
Madeiran sardinellaOP
Ok
How did you learn everything you know
Did you take classes or something
Madeiran sardinellaOP
Or just youtube and docs
i prefer to learn everything by myself
Madeiran sardinellaOP
Good for you
with docs and exploring existing code on GH
Madeiran sardinellaOP
Im trying that as well
that's how i learnt c++, java, php, C#, ts and js and more
Madeiran sardinellaOP
Can I use php for backend
but you need another project and server
Madeiran sardinellaOP
I know C++ but afaik its like useless for web design and only good for games and other high impact apps
@Diamond Master but you need another project and server
Madeiran sardinellaOP
Oh boy I dont even know how that works at all
gl, it's pain to troubleshoot
Madeiran sardinellaOP
Do I use turbopack
@Diamond Master yes
Madeiran sardinellaOP
Ok just ran the brand new project I get this still
I dont think its that big a deal though the site is still visible
prob an extension
on your browser
Madeiran sardinellaOP
Ok good
Whats the difference between a page and a component
The code seems almost the same
I know you bring components and reuse them when needed
component is basically a complex html tag
Madeiran sardinellaOP
Ok
This is throwing an error in the new project but not the old one
Its in head btw
And I use <Link> react component for actual links
you should really use react's components and not html
Madeiran sardinellaOP
But those are <head> lines for importing css sheets
you don't need to link css like that anymore
Madeiran sardinellaOP
Oh great how then
you should use tailwind
it should already come with nextjs
Madeiran sardinellaOP
It does I just dk how to use it
look up wikis online
Madeiran sardinellaOP
Ok
Isnt tailwind just a bootstrapper?
not really
Madeiran sardinellaOP
So I have to write my css in every className="" forever?
How do I just make my own classes and reuse them
it will tell you in the wiki in theory
Madeiran sardinellaOP
Ok
Madeiran sardinellaOP
The resource http://localhost:3000/assets/GSAP/ScrollTrigger.min.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.I still get this error
No matter what I do
idk, srry, never seen that err before
@Diamond Master idk, srry, never seen that err before
Madeiran sardinellaOP
For any js functionality I try to use, I always get "error: write "use client" for client-side" or something like that. Shouldnt I just always have that on then?
Can I ask, what is it you are building?
As what are you are building kind of defines what you need to do and how to use NextJS.
@Madeiran sardinella For any js functionality I try to use, I always get "error: write "use client" for client-side" or something like that. Shouldnt I just always have that on then?
yes, you need "use client" at the top of the file
@adam.birds Can I ask, what is it you are building?
Madeiran sardinellaOP
Its a web app for networking and documentation
Think of like linkedin + github for companies sorta
But im not diong that by myself obviously
Right now Im just trying to get the landign page together and the framework familiar
Later I can learn more and get others help or employ people maybe
@Diamond Master yes, you need "use client" at the top of the file
Madeiran sardinellaOP
I fixed the script error but now I have this
When trying to edit the page title
@Madeiran sardinella Its a web app for networking and documentation
So if its a landing page you don't want to use client based components.
Madeiran sardinellaOP
I have "use client" above my pages btw since I need the effect
@adam.birds So if its a landing page you don't want to use client based components.
Madeiran sardinellaOP
Ok so then how should I go about it
What do you want on this landing page?
Madeiran sardinellaOP
How can I get a javascript file to run to make the page work and do its own stuff
@adam.birds What do you want on this landing page?
Madeiran sardinellaOP
Not entirely sure yet but it has title and other stuff
Like
I want to probably include a slideshow sorta thing where you scroll and images move across the screen
Maybe showcasing the UI of the site and dashboard
Which I dont have yet, but thats for later
joinhandshake.com
Something similar to that but less zoomer-y
I know that one is made on rails though
So you are missing the key point. React is javascript, you don't want to be importing and running vanilla stuff. If thats what you want to do NextJS/React isn't going to be the best thing for you. The whole benefit of NextJS over normal React and most other frameworks, is the server side rendering which grants you seo benefits, and for a landing page that is what you want to use. But even if working client side for example in the dashboard, you shouldn't ever have a need to import a vanilla js file as you can do it all with react.
Madeiran sardinellaOP
Thats ok I can just write everything js into tsx
I just need to know if next.js overall is what I need
Im not a web designer, im a business student who has programmed before but I dont have a whole lot of knowledge with frontend OR backend
I intially started just with raw html, css, js all vanilla because I just wanted to get somethiong down and didnt want to learn something I didnt know i would need
Now that I know and starting to get more serious, I need something that will work for what I'm doing and also be collaborative with others who can take the burden of web design in the future
So they dont have to start all over basically
@Madeiran sardinella Im not a web designer, im a business student who has programmed before but I dont have a whole lot of knowledge with frontend OR backend
I think the key thing, is before you try and build this app you want (which sounds quite complex and based off this right now not yet achievable by yourself), is to spend some time learning the framework, and the best options are either React + Vite, or NextJS. The latter being able to support both backend and frontend together. Its worth learning this using some courses and tutorials and actually trying to understand the the way it works before trying to build an app. And tbh if the plan is to partner with someone or pay someone to build it, they would probably prefer starting from scratch than trying to continue code someone else written. Its doable to write a web app in vanilla, but frameworks make it a tonne easier.
Australian Freshwater Crocodile
If you’re starting you might not even need all the features and benefits Next.js gives you, you might start with React + Vite, even with the React Router Vite plugin.
Next.js takes for granted that you’re aware of the Latest React v19 features and you’re familiarized with Server Side rendering, different environments (the server and the client)
Next.js takes for granted that you’re aware of the Latest React v19 features and you’re familiarized with Server Side rendering, different environments (the server and the client)
And use python for the backend once you need a backend, its very beginner friendly.
@adam.birds I think the key thing, is before you try and build this app you want (which sounds quite complex and based off this right now not yet achievable by yourself), is to spend some time learning the framework, and the best options are either React + Vite, or NextJS. The latter being able to support both backend and frontend together. Its worth learning this using some courses and tutorials and actually trying to understand the the way it works before trying to build an app. And tbh if the plan is to partner with someone or pay someone to build it, they would probably prefer starting from scratch than trying to continue code someone else written. Its doable to write a web app in vanilla, but frameworks make it a tonne easier.
Madeiran sardinellaOP
Ok that all makes sense. I have a partner but its just me doing the technical stuff, he is mainly networking
@adam.birds And use python for the backend once you need a backend, its very beginner friendly.
Madeiran sardinellaOP
Ill try it
What is best for functionality? PHP or python
@adam.birds I think the key thing, is before you try and build this app you want (which sounds quite complex and based off this right now not yet achievable by yourself), is to spend some time learning the framework, and the best options are either React + Vite, or NextJS. The latter being able to support both backend and frontend together. Its worth learning this using some courses and tutorials and actually trying to understand the the way it works before trying to build an app. And tbh if the plan is to partner with someone or pay someone to build it, they would probably prefer starting from scratch than trying to continue code someone else written. Its doable to write a web app in vanilla, but frameworks make it a tonne easier.
Australian Freshwater Crocodile
What he said.
Start with fully Client side apps, you might have heard of them as Single Page Apps (SPA) and connect to a backend the traditional way.
In Next.js there are two environments built-in, the Server and the Client, if you can’t understand the differences between those two, you’re not gonna have a nice time with Next.js.
Certain features can only be used in the Client while others can only be used on the Server, and the docs are clear about that, but most of the Next.js docs take for granted that you know all this because you should know this from the React docs
Start with fully Client side apps, you might have heard of them as Single Page Apps (SPA) and connect to a backend the traditional way.
In Next.js there are two environments built-in, the Server and the Client, if you can’t understand the differences between those two, you’re not gonna have a nice time with Next.js.
Certain features can only be used in the Client while others can only be used on the Server, and the docs are clear about that, but most of the Next.js docs take for granted that you know all this because you should know this from the React docs
@Madeiran sardinella What is best for functionality? PHP or python
Australian Freshwater Crocodile
Both have batteries included frameworks, both have a lot of support and you’ll be fine with either of them. But Phyton as a language is easier to learn and understand than PHP
Thats a good way to explain it
Because right now
I have zero fucking idea the difference between client side and server side
I dont know how to handle like personal profiles, logins, profile editing, file uploads, server services
I have ZERO idea and im going into it new
If next js is usable with all of those design components, great, but I still need to learn
As for backend, I dont even know where to start or what to do, will probably have to hire someone to do it for me
I know some C++ and a good amount of Java, so if those are used for backend Id probably pick those unless python was significantly easier or something, I just dont like its syntax much at all
Australian Freshwater Crocodile
well forget about C++ for backend stuff lol maybe the closest would be C# with ASP.net and it’s pretty solid but like you said you’d have to learn all the sintax and stuff that’s different
I mean you can hardly call python syntax (it is syntax) to be honest, as its probably the closest language you will ever get to being pseudocode. Most of the commands are what you would expect in english
Madeiran sardinellaOP
Ive used python before I know its basically just english, Im just used to C++ and java so their syntax is just more recognizable
PHP looks like html so Im not excited to try it
Australian Freshwater Crocodile
Java with Springboot is pretty used but I’ve never liked Java so idk how good it actually is
Based off all the above I would properly plan out/wireframe how you want the app to look and work, and then bring in a third business partner who is a developer, as sounds like you will struggle (and this isn't being mean, we where all in that position once, i would have struggled myself two years ago and id been coding other stuff for four years) building a normal website, never mind a complex web app. If you do want to develop it yourself, then you need to step back and spend 6 months to a year learning a frontend and backend framework.
@Australian Freshwater Crocodile Java with Springboot is pretty used but I’ve never liked Java so idk how good it actually is
Madeiran sardinellaOP
I took Java for compsci in high school so I didnt really have a choice
I mean right now, I JUST need a good landing page basically
@Madeiran sardinella I mean right now, I JUST need a good landing page basically
Honestly, if all you want is a landing page, for now use wordpress. It will be easy to do, and then you can send time lanning the business or learning a frameowrk etc
Madeiran sardinellaOP
We actually have a third partner who does stuff in europe, and we think he might try to claim the business model is his IP so we're hoping we have something decent to present to him, else he tries to sue or something because he technically doesnt know im a partner
@adam.birds Honestly, if all you want is a landing page, for now use wordpress. It will be easy to do, and then you can send time lanning the business or learning a frameowrk etc
Madeiran sardinellaOP
I was hoping you wouldnt say that
Ill see though since we have one
@Madeiran sardinella I was hoping you wouldnt say that
Australian Freshwater Crocodile
You said you know CSS HTML and JavaScript right?
Try Astro is basically those three with powers lol. Astro It’s pretty easy to pick up, and if you want interactive components you can bring React components only when you really need it
The rest will be completely Static HTML sent to the browser, you get access to cool features like Routing, Components, FAST websites and basically that’s all you need for now
Ok
I mean whats the difference between that and nextjs though
Thats probably a stupid question
But ts basically a superset of js
The rest is just putting html and css in there, so I guess its learning the framework thats the hardest part?
@Madeiran sardinella The rest is just putting html and css in there, so I guess its learning the framework thats the hardest part?
React and NextJS are both written in either javascript or typescript, but its completely different to writing vanilla stuff. And you really need to un derstand recat before understanding nextjs.
Australian Freshwater Crocodile
Astro is basically a way of writing HTML CSS and JavaScript (or TypeScript) adding patterns well stablished by Frontend frameworks such as routing, components, scoped CSS (you can write the CSS right in the same file and don’t worry about anything).
If you decide to give Astro a try don’t pay much attention to the render modes and all the Serverfull features that will overwhelm you when it’s not needed at all for your use case (for now)
If you decide to give Astro a try don’t pay much attention to the render modes and all the Serverfull features that will overwhelm you when it’s not needed at all for your use case (for now)
Yea, for Next.js you need to know:
-JavaScript (TypeScript)
-HTML
-CSS
-React
-Next.js specific features
For Astro:
-JavaScript (TypeScript)
-HTML
-CSS
-JavaScript (TypeScript)
-HTML
-CSS
-React
-Next.js specific features
For Astro:
-JavaScript (TypeScript)
-HTML
-CSS
And the end product will look exactly the same for the end user since it’s gonna be a Landing Page, and the Astro one would be faster
Madeiran sardinellaOP
Ill probably give that a try then, if not forever at least I can get my code in for the time being
Seeing as my normal vanilla project literally looks like this LOL
Australian Freshwater Crocodile
Good thing is you can copy and paste that code in Astro projects and you won't need to change many things, get familiar with the routing, the way components work etc
basically all your files with the same name (extensions .html, .css & .js) can be all in the same .astro file:
---
// JavaScript that will only run on the Server (at first you can omit this part)
// Also your imports go here
---
<main>
<div>
all your PAGE HTML and visual stuff here
</div>
</main>
<style>
.your-style {
color: red;
}
</style>
<script>
// JavaScript that ONLY runs on the client
</script>I can decrease a lot of clutter that way
Will probably stick with that for now then
Australian Freshwater Crocodile
Click on my profile and my website is built with Astro, I made it as I learned that Framework
And it the footer there’s the source code on GitHub if it helps you with anything, I have to say I’ve changed some ways of doing things (especially organizing folders) but might work for your use case
@Australian Freshwater Crocodile Click on my profile and my website is built with Astro, I made it as I learned that Framework
Madeiran sardinellaOP
Oh wow I actually really like what you have on there
The little code snippets and the boxes that shift as you mouseover is a nice touch
Thats pretty much all I need for now as far as the landign page goes
Ill try switching over to astro for now
Australian Freshwater Crocodile
Press left and right on your keyboard
It’ll change the accent color lol a hidden trick
Madeiran sardinellaOP
Thats sick bro
It looks really good overall
And the little loading bar at the top
I might take a peek inside to see how you did some of this stuff lol its really nice functionality
A website is a good way to market yourself
Australian Freshwater Crocodile
Thank you haha yea that’s the idea, take what you might need from it
Madeiran sardinellaOP
Have you considered moving to the states for work or are you staying in mexico?
Australian Freshwater Crocodile
I’m still studying, will be graduating this June
So for now I’m stuck here haha
Madeiran sardinellaOP
Well good luck with your studies, hope that all goes well
Also, connect with TONS of people on LinkedIn
What ive learned from being at a business school (works everywhere)
That like how successful you are is honestly less about what you know and more about WHO you know
And I honetly suck at networking
I need to get more connections and everything
Australian Freshwater Crocodile
Yea connections are the key and I also suck at networking lol
Madeiran sardinellaOP
But thats a suggestion I would make too since its soooo valuable
@Australian Freshwater Crocodile Yea connections are the key and I also suck at networking lol
Madeiran sardinellaOP
Its hard bro
Im kinda an anomaly im in between a business student and wanting to do some compsci
Australian Freshwater Crocodile
Plus I’m in a hole where basically no one is up to date with tech stuff where I’m from, no good startups, no big tech, even the senior devs are shitty lol
Madeiran sardinellaOP
Lmao that sounds pretty tough ngl
Youll be out soon though it sounds
I dropped you a connection btw
Australian Freshwater Crocodile
Sound nice!
Anyway we should not be polluting the thread with unrelated talking 😭😂
Anyway we should not be polluting the thread with unrelated talking 😭😂