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"]
}