I am using next js app, from UI i want open browser within my app ,
here is my code written in route.js
export async function POST(request: Request) {
const { webUrl: userSearch } = await request.json();
const headersList = headers();
const origin = headersList.get('origin') || 'http://localhost:3000';
if (!userSearch) {
return NextResponse.json(
{ error: "Search parameter not provided" },
{ status: 400 }
);
}
let browser;
try {
browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--start-maximized']
});
console.log(browser);
const page = await browser.newPage();
await page.goto(userSearch);
return NextResponse.json({
success: true,
message: "Browser launched successfully",
url: userSearch
});
}
catch (error: any) {
return NextResponse.json(
{ error: `An error occurred: ${error.message}` },
{ status: 200 }
);
}
}
UI component page.js
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
const res = await fetch("/launchBrowser", {
method: "POST",
body: JSON.stringify({ webUrl }),
headers: {
"Content-Type": "application/json",
},
});
};
Now test browser getting launch
I am looking to open this within my app http://localhost:3000
is any way there to do this