Merge pull request #58 from AElfProject/feature/nextjs-15

Feature/nextjs 15

app/github.com/[user]/[repo]/tree/[branch]/[...path]/page.tsx

@@ -84,11 +84,20 @@ const getData = async ({ path, user, repo, branch }: Params) => {
   return response;
 };
 
-export default async function Page({
-  params: { path, user, repo, branch },
-}: {
-  params: Params;
-}) {
+export default async function Page(
+  props: {
+    params: Promise<Params>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    path,
+    user,
+    repo,
+    branch
+  } = params;
+
   const data = await getData({ path, user, repo, branch });
 
   return (

app/share/[id]/page.tsx

@@ -1,6 +1,12 @@
 import { SharePageComponent } from "./_sharepagecomponent";
 
-export default function Page({ params: { id } }: { params: { id: string } }) {
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+
+  const {
+    id
+  } = params;
+
   return (
     <SharePageComponent id={id} />
   );

app/tutorials/[id]/page.tsx

@@ -5,11 +5,17 @@ import GenerateTemplate from "@/components/tutorial/generate-template";
 import GenerateTemplateSolidity from "@/components/tutorial/generate-template-solidity";
 import "./page.scss";
 
-export default async function Page({
-  params: { id },
-}: {
-  params: { id: string };
-}) {
+export default async function Page(
+  props: {
+    params: Promise<{ id: string }>;
+  }
+) {
+  const params = await props.params;
+
+  const {
+    id
+  } = params;
+
   let res = { default: "" };
   try {
     res = await import("./_content/" + id + "/" + id + ".mdx");

app/workspace/[id]/page.tsx

@@ -1,4 +1,5 @@
-"use client";
+"use client";;
+import { use } from "react";
 
 import TopBottom from "@/components/top-bottom";
 import {
@@ -10,7 +11,13 @@ import Cli from "@/components/workspace/cli";
 import Editor from "@/components/workspace/editor";
 import LeftSide from "@/components/left-side";
 
-export default function Page({params: {id}}: {params: {id: string}}) {
+export default function Page(props: {params: Promise<{id: string}>}) {
+  const params = use(props.params);
+
+  const {
+    id
+  } = params;
+
   return (
     <ResizablePanelGroup direction="horizontal" className="border">
       <LeftSide name={id} />

app/workspaces/page.tsx

@@ -1,11 +1,7 @@
 import { WorkspaceForm } from "@/components/new-workspace-form";
 import { FileUpload } from "@/components/workspace/file-upload";
 import { getTemplateNames } from "@/data/template";
-import dynamic from "next/dynamic";
-
-const Existing = dynamic(() => import("@/components/workspace/existing"), {
-  ssr: false,
-});
+import Existing from "@/components/workspace/existing";
 
 export default async function Page() {
   const templateOptions = await getTemplateNames();

lib/env.ts

@@ -27,9 +27,12 @@ export function getSolidityEnabled() {
 }
 
 export function getFaucetUrl() {
-  return process.env["NEXT_PUBLIC_FAUCET_API_URL"];
+  // https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser:~:text=Note%20that%20dynamic%20lookups%20will%20not%20be%20inlined%2C%20such%20as%3A
+  const varName = "NEXT_PUBLIC_FAUCET_API_URL";
+  return process.env[varName];
 }
 
 export function getGoogleCaptchaSitekey() {
-  return process.env["NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY"];
+  const varName = "NEXT_PUBLIC_GOOGLE_CAPTCHA_SITEKEY";
+  return process.env[varName];
 }