Skip to content

Instantly share code, notes, and snippets.

@MonteLogic
Last active August 14, 2024 06:48
Show Gist options
  • Select an option

  • Save MonteLogic/910cd8a105e2373c42c3023d6111f5ab to your computer and use it in GitHub Desktop.

Select an option

Save MonteLogic/910cd8a105e2373c42c3023d6111f5ab to your computer and use it in GitHub Desktop.
md2eb.md

Start:

Mon 12 Aug 2024 09:51:43 PM CDT

We are going to recycle a project which we've already used but it is currently NOT able to SSG but has PDF generation functionality in it.

We a just going to gh clone repo it--the previous project, delete the .git folder, rename the project folder and initialize it with a name within VS Code.

No Vercel.

Normally, we use Vercel for this but we are trying to export out to a cPanel type of environment.

What we have

The codebase we are working in is a PDF generation codebase but doesn't utilize SSG.

Currently 99% of the pages are being built as, 'λ'.

Hopefully we can get a just static version of this, https://github.com/vercel/next-app-router-playground

Getting SSG to work with Clerk

Reading the SSG part of this: https://clerk.com/blog/nextjs-authentication

After getting the error:

⨯ Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory). If you're using /pages, try getAuth() instead. Original error: Error: Page with dynamic = "error" couldn't be rendered statically because it used headers. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering

using clerk with next ssg

It looks like the work is going to be done in the client side with saving session tokens.

Start:

Tue 13 Aug 2024 03:07:11 PM CDT

Working on Clerk stuff.

I don't think Next.js has focused on SSG for very long so I think the Clerk offering for this are going to be slim.

I am learning how Auth is done in Astro and hopefully there will be carry over into SSG within Next.js.

Open Issue on stackoverflow, here, https://stackoverflow.com/questions/68868513/how-to-make-nextauth-js-work-with-ssg-static-site-generated-in-a-next-js-websi

---PN Private Note: I think blog posts like these can be excessive. https://clerk.com/blog/nextjs-authentication It would be much better if you segmented them into posts of there own where you dive into each topic and you have a larger page where you show all of the dived into articles summarizing them ---PN

Can't Host own API files with static export?

It looks like we can't host our own APIs within a static export so we are going to query a third-party in this case, Clerk.

Trying to figure out if when you query you still need the provider or not.

...

Okay, so Vercel playground isn't working, so we are going to use a repo which is SSG from the start.

Finding Repos with the desired functionality:

This uses SWR with static generation to bring in data, but its using pages dir not app dir. https://github.com/vercel/examples/tree/main/solutions/combining-data-fetching-strategies

This is app dir and SSG but its using Sanity and I don't know what that is: https://github.com/sanity-io/nextjs-blog-cms-sanity-v3

It appears to be a headless content system.

----PN

This is bad design, I'm trying to figure out what the product is and it's just a bunch of animations. They try to look cool when they just need to tell me what their product is doing. https://www.sanity.io/?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter


There's a lot of fluff here with the Sanity stuff so, still looking.

It looks like most of the repos are using Pages dir not app dir but this repo uses app dir. https://github.com/james-langridge/nextjs-contentful-marketing-blog/tree/main

That does not output to a good out file, it does not export well: https://github.com/afonsoart/nextjs13-blog

The vast majority of Next.js apps aren't exporting to HTML

Not sure why this is.

Why are people talking about Astro when Next.js HAS SSG functionality?

Side Note: generateStaticParams can still provide dynamic functionality.

My Issue: CSS is not showing on Next export

So, I'm running through these: https://github.com/vercel/next.js/tree/canary/examples

Okay, for some reason if they are served on a http server, than I don't get this no CSS nonsense but if I just open the HTML file then I get no CSS.

Workaround with replacer module

You can use a replacer module to replace it to your local files if you want to access the HTML file directly for test purposes.

But lets just use http-serve and deal with the extra step.

So, we are just going to work with the http-serve step.

Back to the grind,

I'm not going to fall into the thing of trying to make it look just like the reference one, we're going functionality first.

Side Note: It would be really dope if that repo for the vercel router playground had a cli. So you could just run it and request SSG only.

Signing off for today:

For this, src/lib/api.ts We need to add functionality for the dummy data.

I've noticed that the coding structure for SSG is different than not using SSG. It's tougher to get stuff done by like a good amount.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment