Integrating Solana wallet-adapter into Next.js app
Solana is a high-performance blockchain that has gained popularity for its low transaction fees and fast confirmation times. If you’re building a Next.js app and want to integrate Solana wallet functionality, the wallet-adapter library makes it easy to add wallet support to your app. In this article, we’ll walk through the steps to integrate wallet-adapter into your Next.js app.
Step 1: Install wallet-adapter
Start by installing wallet-adapter using npm or yarn:
npm install @solana/wallet-adapter react @solana/wallet-adapter-react
or
yarn add @solana/wallet-adapter react @solana/wallet-adapter-react
Step 2: Set up the wallet provider
Next, set up the wallet provider by creating a new file, such as ‘wallet.js’, and add the following code:
import { Wallet } from '@solana/wallet-adapter-wallets';
import { getPhantomWallet } from '@solana/wallet-adapter-wallets';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { ConnectionProvider } from '@solana/wallet-adapter-react';
export default function WalletProvider({ children }) {
const wallets = [
getPhantomWallet(),
];
return (
{children}
);
}
Step 3: Integrate with your Next.js app
Now, you can integrate the wallet provider with your Next.js app. In your ‘_app.js’ file, wrap your app with the WalletProvider component:
import React from 'react';
import WalletProvider from './wallet';
function MyApp({ Component, pageProps }) {
return (
);
}
export default MyApp;
Step 4: Add wallet functionality
Finally, you can add wallet functionality to your app by using the hook provided by wallet-adapter:
import { useWallet } from '@solana/wallet-adapter-react';
function MyComponent() {
const { wallet, connect, disconnect, publicKey } = useWallet();
if (wallet) {
return (
Connected to {wallet.name}
Public key: {publicKey?.toBase58()}
);
} else {
return ;
}
}
Conclusion
Integrating Solana wallet support into your Next.js app is straightforward thanks to the wallet-adapter library. By following the steps outlined in this article, you can easily add wallet functionality to your app and take advantage of Solana’s fast and low-cost transactions.
Were you able to let it work with app router ? Do you have a github for this ? Thanks