nextjs of couse do stuff under the hood. If it's ok for your teacher, he can look at the browser readable html code, to see your html code

nextjs minification and obfuscation cannot be disabled afaik.

just tell your instructor that:
1. the app is made with nextjs
2. the javascript they see in the browser is minified and obfuscated for performance, this cannot be turned off
3. they can still see the html/css in the inspect element tab, these things are not obfuscated
4. if the instructor wants, just share the source with them, with running instructions (npm run build + npm start) included

Hello, thanks for the support! Sadly the html generated by react is not enough as the homework is about data visualization (using d3.js to make graphs) so the html generated is a graph in an SVG. They grade how I make the SVG…

And I wanted to use react because use effect and use ref is great to handle SVGs

maybe he can use static export and share the generated files?
I never used it so i don't really know but sounds like it outputs html, css, jss separately.
Don't know about minification though
https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

Static export should also perform minification for performance

Ok last idea include the source maps in production build?

That’s an interesting idea. It should work yes though I’ve never tried it

me neither that why i ping you

Why I know it works: Sentry error logs are displayed in plain unminified code. It has saved me couple times

How to use it tho no idea

@Somali maybe try the react developer browser extension

Iirc called react devtool or something

Or maybe I'm mistaken

Oh wow interesting, never knew this

Try it, I think it does work

Release notes of next 13 and 14 do not include any removals of these options

I hope so ^^ i'm still in school, I'll try back at home and keep you guys informed. Have a nice day and thanks again

yes it works!

but it has a lot of extra stuff as polyfills for older browsers. it's best to still send the teacher the source code too, like a github link

haha ye he can't show that to his teacher

fyi the above is the compiled code for this

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [now, setNow] = useState("");
  useEffect(() => {
    const interval = setInterval(() => {
      const date = new Date();
      setNow(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <div>{now}</div>;
}

Lol yeah I think he will definitely don't accept that, my case aside, that's pretty interesting to know 🙂

I think you're right, it will be a great addition to my github account which is completely empty... Hope he likes it 🙂

your school advanced, mine had.. html css and like tubmlr...

I tested the production source maps it's wild too. Not really solving your problem

thats the problem the teacher wants html, css, js and he used react/nextjs (on his own) 😆

how advanced is your project, might jsut be better to code it in html css and js really quick

throw that nextjs code into chatgpt and tell it to rewrite to vanilla js

ik thats not what this thread is about, but maybe someties its better to try out just hard labor xD

na com'n the kid is right the teacher is not up to date. Does not accept a repo with react as framework? com'n

tbf though unless the code involves a lot of react states, it's pretty easy to convert it to raw html since it's mainly a d3.js project

Even if it's quite easy to rewrite it to raw html/js this is about a principle. Your class should band together and burn the teachers car to send a signal
(i am kidding ofc)

with school, better to not experiment and just get your marks :(

teacher cars must burn

It's not that the project is too advanced to rewrite it from scartch in html/css but rather than I use react-use's useInterval hook to actualise some object's positions.

To give a bit of context, the project is a representation of Pokémon types as circles. When you click a pokémon type, other types that are very effective, less effective or uneffective to this type are bound by a line. The other types are vanished.

The issue here is that the whole thing is running in a physical simulation, so when you move a circle others move accordingly. That means that the lines' positions have to be updated accordingly. That's why I use useInterval.

It could be done with setInterval (vanilla javascript) but the hook is better since it works well with the rest of the code who's in a useEffect.

Sure it could be done without react, but the readability of the code would be so much worse

Bro I'm 22yo I'm not a kid ahah
I used the word school as it's not a university lol, I mean it's a school but not an elementary school or high school

22? Okay, kid

Lol, my bad sir

you should get used to work within requirements, because in real world you will sometimes have to work with very outdated tech

Yeah that's a good point but also good to try new things and push boundaries. When in doubt just go to professor office hours and you'll get an A

hey, I rewrote the whole code for vanilla js and I'll deliver that, but I'll use the react version for the presentation. I'll do a live demo or something 🙂 since I used shadcnui for the whole page layout, I bet i'll get points for that

Best of luck with the presentation