ci(build): switch from getServerSideProps to getInitialProps (#56)

Author: kahboom

.github/workflows/nextjs.yml

@@ -29,8 +29,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4.1.3
       - name: Detect package manager
         id: detect-package-manager
         run: |
@@ -74,15 +74,15 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: ${{ steps.detect-package-manager.outputs.runner }} build && touch ./out/.nojekyll
         env:
           NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: ${{ secrets.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN }}
       #      - name: Static HTML export with Next.js
       #        run: ${{ steps.detect-package-manager.outputs.runner }} next export
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          path: ./out
+  #      - name: Upload artifact
+  #        uses: actions/upload-pages-artifact@v4
+  #        with:
+  #          path: ./out
 
   # Deployment job
   deploy:
@@ -92,6 +92,12 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1
+      #      - name: Deploy to GitHub Pages
+      #        id: deployment
+      #        uses: actions/deploy-pages@v4
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.6.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: main
+          folder: out

.gitignore

@@ -11,6 +11,7 @@
 # production
 /build
 /.next
+out
 
 # misc
 .DS_Store

jest.setup.js

@@ -2,4 +2,10 @@
 import "@testing-library/jest-dom";
 import { TextEncoder, TextDecoder } from "util";
 
+jest.mock("next/config", () => () => ({
+	publicRuntimeConfig: {
+		NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: "https://rekor.sigstore.dev",
+	},
+}));
+
 Object.assign(global, { TextDecoder, TextEncoder });

next.config.js

@@ -7,6 +7,12 @@ const nextConfig = {
 			process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
 	},
 	reactStrictMode: true,
+	assetPrefix: "./",
+	images: {
+		loader: "akamai",
+		path: "",
+	},
+	output: "export",
 	publicRuntimeConfig: {
 		// remove private env variables
 		processEnv: Object.fromEntries(

src/modules/api/context.tsx

@@ -7,6 +7,7 @@ import {
 	useState,
 } from "react";
 import { RekorClient } from "rekor";
+import getConfig from "next/config";
 
 export interface RekorClientContext {
 	client: RekorClient;
@@ -22,6 +23,7 @@ export const RekorClientProvider: FunctionComponent<PropsWithChildren<{}>> = ({
 	children,
 }) => {
 	const [baseUrl, setBaseUrl] = useState<string>();
+	const { publicRuntimeConfig } = getConfig();
 
 	const context: RekorClientContext = useMemo(() => {
 		/*
@@ -31,8 +33,8 @@ export const RekorClientProvider: FunctionComponent<PropsWithChildren<{}>> = ({
 		https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
 		*/
 		if (baseUrl === undefined) {
-			if (process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) {
-				setBaseUrl(process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN);
+			if (publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) {
+				setBaseUrl(publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN);
 			} else {
 				setBaseUrl("https://rekor.sigstore.dev");
 			}

src/pages/_app.tsx

@@ -1,8 +1,20 @@
 import type { AppProps } from "next/app";
 import "@patternfly/react-core/dist/styles/base.css";
+import { NextPageContext } from "next";
 
 function App({ Component, pageProps }: AppProps) {
 	return <Component {...pageProps} />;
 }
 
+App.getInitialProps = async (_ctx: NextPageContext) => {
+	return {
+		props: {
+			NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: process.env
+				.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
+				? process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
+				: null,
+		}, // gets passed to the page component as props
+	};
+};
+
 export default App;

src/pages/index.tsx

@@ -112,14 +112,3 @@ const PageComponent: NextPage = () => (
 	</RekorClientProvider>
 );
 export default PageComponent;
-
-export async function getServerSideProps() {
-	return {
-		props: {
-			NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN: process.env
-				.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
-				? process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN
-				: null,
-		}, // gets passed to the page component as props
-	};
-}