Next 14 + App router

[severinlandolt]

Hey @soranoo, does this work with Next 14 + App router? Thanks

Update: Seems to be working!

How can I configure the white and blacklist to only obfuscate the folders/files in the green section? And exclude anything in the red section?

 blackListedPaths: ['./next/cache', './src/app/**/*.{js,ts,jsx,tsx}'],
 whiteListedPaths: ['./src/content/components/**/*.{js,ts,jsx,tsx}'],
 excludeAnyMatchRegex: [/\.next\/server\/pages\/api/],

[soranoo]

You can't whitelist or blacklist the source code folders/files. The whitelist and blacklist are for the files/folders inside the .next folder.

Btw here's my test (https://github.com/soranoo/next-css-obfuscator/tree/main/demo/next14-app-router),

[severinlandolt]

Oh wow @soranoo, you are quick ✨

Maybe a dumb question: I'd like to keep and edit the original files: How do you go about once you successfully generated the out folder? Do you just replace the original files/folders?

And is env.js necessary?

[soranoo]

You can feel free to delete the out & css-obfuscator folders. They will be generated in every obfuscation. If the env.js is inside the mentioned folders, it means it is unnecessary to keep it.

[severinlandolt]

Alright, the obfuscation is working @soranoo

original file

export default function KpiCard1() {
  return (
    <Card className="mx-auto max-w-sm">
      <Text>Issues solved</Text>
      <Flex justifyContent="start" className="space-x-1" alignItems="baseline">
        <Metric className="text-gray-900">338</Metric>
        <Text>/ 450</Text>
      </Flex>
      <ProgressBar value={75} className="mt-6" />
    </Card>
  );
}

out ✅

export default function KpiCard1() {
  return (
+    <Card className="pdy3r huyg1">
      <Text>Issues solved</Text>
      <Flex justifyContent="start" className="space-x-1" alignItems="baseline">
+      <Metric className="el4s8">338</Metric>
        <Text>/ 450</Text>
      </Flex>
+   <ProgressBar value={75} className="xoqq0" />
    </Card>
  );
}

Here are my steps:

1. Run next build && npm run obfuscate-build
2. Delete folders: css-obfuscator and out
3. Delete next/cache
4. Run next start

But if i check out the website on localhost, the classes are not obfuscated. Which is actually expected, becauseI have not made any changes to the original files, they are still using the normal classes like mx-auto.

[soranoo]

Yes, I see there are some classes still in their original form but that should be fixed on the PostCSS-Obfuscator side. At least I made it work in Nextjs even though it is not fully functional. So I called this package a temporary solution.

[severinlandolt]

Ah, it's completely fine with the classes that are not replaced, it's not that relevant to me. But how did you exactly go about in your next js demo project you posted?

I cloned this repo and tried to follow the steps for the demo but I was not able to get the demo project working :(

Could you outline what steps you follow to make the demo project work?

[soranoo]

I ran npm run build & npm run start twice to get it to work at the first time. I don't know the exact reason but it works 💯

[severinlandolt]

Hey @soranoo, I was not able to get it running, also a colleague did not figure it out.

We have opened a $225 bounty to someone who fixes that problem in our repo. Would you be interested in helping us out?

[soranoo]

certainly. why don't give it a try

Is it a public repo?

[severinlandolt]

@soranoo great! It's a private repo. I will set everything up and invite you to the repo. May I have your Email/Slack/Discord? Easier to communicate over there :)

[severinlandolt]

Copied it, you can delete the message. Will send you an email later today!