From c846bfb118fda036aa0dcc5b710da6bac93dd4d7 Mon Sep 17 00:00:00 2001 From: Ivan Oberemok Date: Wed, 26 Jun 2024 12:12:34 +0300 Subject: [PATCH] feat: migrate to NextJS app router (#2580) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature(create-fuels): migrated to app router * feature(create-fuels): added 'use client' where needed * feature(create-fuels): updated configs * changeset * Update .changeset/slow-students-destroy.md Co-authored-by: Peter Smith --------- Co-authored-by: Peter Smith Co-authored-by: Sérgio Torres <30977845+Torres-ssf@users.noreply.github.com> --- .changeset/slow-students-destroy.md | 5 +++ .../{pages/faucet.tsx => app/faucet/page.tsx} | 2 + templates/nextjs/src/app/layout.tsx | 45 +++++++++++++++++++ .../src/{pages/index.tsx => app/page.tsx} | 2 + .../predicate.tsx => app/predicate/page.tsx} | 2 + .../{pages/script.tsx => app/script/page.tsx} | 2 + templates/nextjs/src/pages/_app.tsx | 38 ---------------- templates/nextjs/src/pages/_document.tsx | 13 ------ templates/nextjs/tailwind.config.ts | 6 +-- templates/nextjs/tsconfig.json | 9 +++- 10 files changed, 66 insertions(+), 58 deletions(-) create mode 100644 .changeset/slow-students-destroy.md rename templates/nextjs/src/{pages/faucet.tsx => app/faucet/page.tsx} (99%) create mode 100644 templates/nextjs/src/app/layout.tsx rename templates/nextjs/src/{pages/index.tsx => app/page.tsx} (99%) rename templates/nextjs/src/{pages/predicate.tsx => app/predicate/page.tsx} (99%) rename templates/nextjs/src/{pages/script.tsx => app/script/page.tsx} (99%) delete mode 100644 templates/nextjs/src/pages/_app.tsx delete mode 100644 templates/nextjs/src/pages/_document.tsx diff --git a/.changeset/slow-students-destroy.md b/.changeset/slow-students-destroy.md new file mode 100644 index 00000000000..5bdb47c117b --- /dev/null +++ b/.changeset/slow-students-destroy.md @@ -0,0 +1,5 @@ +--- +"create-fuels": patch +--- + +feat: migrate to NextJS app router diff --git a/templates/nextjs/src/pages/faucet.tsx b/templates/nextjs/src/app/faucet/page.tsx similarity index 99% rename from templates/nextjs/src/pages/faucet.tsx rename to templates/nextjs/src/app/faucet/page.tsx index 9d486904b09..36a0ea08d15 100644 --- a/templates/nextjs/src/pages/faucet.tsx +++ b/templates/nextjs/src/app/faucet/page.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Button } from "@/components/Button"; import { Input } from "@/components/Input"; import { useActiveWallet } from "@/hooks/useActiveWallet"; diff --git a/templates/nextjs/src/app/layout.tsx b/templates/nextjs/src/app/layout.tsx new file mode 100644 index 00000000000..aa56bcd5369 --- /dev/null +++ b/templates/nextjs/src/app/layout.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { Layout } from "@/components/Layout"; +import "@/styles/globals.css"; +import { FuelProvider } from "@fuels/react"; +import React, { ReactNode, useEffect, useState } from "react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { FuelConfig } from "fuels"; +import { defaultConnectors } from "@fuels/connectors"; +import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; +import { ActiveWalletProvider } from "@/hooks/useActiveWallet"; + +const queryClient = new QueryClient(); + +interface RootLayoutProps { + children: ReactNode; +} + +export default function RootLayout({ children }: RootLayoutProps) { + const [fuelConfig, setFuelConfig] = useState({}); + + useEffect(() => { + setFuelConfig({ + connectors: defaultConnectors({ + devMode: ENABLE_FUEL_DEV_CONNECTOR, + }), + }); + }, []); + + return ( + + + + + + + {children} + + + + + + + ); +} diff --git a/templates/nextjs/src/pages/index.tsx b/templates/nextjs/src/app/page.tsx similarity index 99% rename from templates/nextjs/src/pages/index.tsx rename to templates/nextjs/src/app/page.tsx index e49dfbab13c..588cd40b981 100644 --- a/templates/nextjs/src/pages/index.tsx +++ b/templates/nextjs/src/app/page.tsx @@ -1,3 +1,5 @@ +"use client"; + import type { TestContractAbi } from "@/sway-api"; import { TestContractAbi__factory } from "@/sway-api"; import contractIds from "@/sway-api/contract-ids.json"; diff --git a/templates/nextjs/src/pages/predicate.tsx b/templates/nextjs/src/app/predicate/page.tsx similarity index 99% rename from templates/nextjs/src/pages/predicate.tsx rename to templates/nextjs/src/app/predicate/page.tsx index 99eaa14b895..20f1586f945 100644 --- a/templates/nextjs/src/pages/predicate.tsx +++ b/templates/nextjs/src/app/predicate/page.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Button } from "@/components/Button"; import { FuelLogo } from "@/components/FuelLogo"; import { Input } from "@/components/Input"; diff --git a/templates/nextjs/src/pages/script.tsx b/templates/nextjs/src/app/script/page.tsx similarity index 99% rename from templates/nextjs/src/pages/script.tsx rename to templates/nextjs/src/app/script/page.tsx index e39fee7fced..c5e87b36c6d 100644 --- a/templates/nextjs/src/pages/script.tsx +++ b/templates/nextjs/src/app/script/page.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Button } from "@/components/Button"; import { FuelLogo } from "@/components/FuelLogo"; import { Input } from "@/components/Input"; diff --git a/templates/nextjs/src/pages/_app.tsx b/templates/nextjs/src/pages/_app.tsx deleted file mode 100644 index 3f523e3e502..00000000000 --- a/templates/nextjs/src/pages/_app.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Layout } from "@/components/Layout"; -import "@/styles/globals.css"; -import { FuelProvider } from "@fuels/react"; -import type { AppProps } from "next/app"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import type { FuelConfig } from "fuels"; -import { defaultConnectors } from "@fuels/connectors"; -import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib"; -import React, { useEffect } from "react"; -import { ActiveWalletProvider } from "@/hooks/useActiveWallet"; - -const queryClient: QueryClient = new QueryClient(); - -export default function App({ Component, pageProps }: AppProps) { - let fuelConfig: FuelConfig = {}; - - useEffect(() => { - fuelConfig = { - connectors: defaultConnectors({ - devMode: ENABLE_FUEL_DEV_CONNECTOR, - }), - }; - }, []); - - return ( - - - - - - - - - - - - ); -} diff --git a/templates/nextjs/src/pages/_document.tsx b/templates/nextjs/src/pages/_document.tsx deleted file mode 100644 index 4cbb5765f34..00000000000 --- a/templates/nextjs/src/pages/_document.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Html, Head, Main, NextScript } from "next/document"; - -export default function Document() { - return ( - - - -
- - - - ); -} diff --git a/templates/nextjs/tailwind.config.ts b/templates/nextjs/tailwind.config.ts index 8137a546c3c..b313a3f9af7 100644 --- a/templates/nextjs/tailwind.config.ts +++ b/templates/nextjs/tailwind.config.ts @@ -1,11 +1,7 @@ import type { Config } from 'tailwindcss'; const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', - ], + content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { backgroundImage: { diff --git a/templates/nextjs/tsconfig.json b/templates/nextjs/tsconfig.json index 3ca6a9a50cb..2e9f1202024 100644 --- a/templates/nextjs/tsconfig.json +++ b/templates/nextjs/tsconfig.json @@ -15,8 +15,13 @@ "incremental": true, "paths": { "@/*": ["./src/*"] - } + }, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }