Serving raw html for widget #14852
-
|
Hello Community, As part of my application, I need a widget with dynamic content that any user can integrate into their sites. I'm thinking of giving one route I've google a bit and couldn't find any solution for this in Next.js, any ideas or sample snippets are appreciated. My html file can be simple 10 lines of html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World {name}</h1>
</body>
</html>or bit complex with dynamic content |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Found a way 🕺 🥳 This is working for me import React from 'react'
const str = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900">
<title>Document</title>
<style>
body{
background-color: white;
}
</style>
</head>
<body>
<div id="test">
<h1>Testing</h1>
</div>
</body>
</html>`;
class Page extends React.Component {
static async getInitialProps(ctx) {
ctx.res.setHeader('Content-type', 'text/html')
ctx.res.write(str);
ctx.res.end();
}
}
export default PageJust did a basic testing, will explore more and update it here. |
Beta Was this translation helpful? Give feedback.
-
|
why don't you redirect it? |
Beta Was this translation helpful? Give feedback.
-
|
You should be able to leverage an api route for this: // pages/api/embed/[id].js
export default (req, res) => {
res.setHeader('content-type', 'text/html')
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900">
<title>Document</title>
<style>
body {
background-color: white;
}
</style>
</head>
<body>
<div id="test">
<h1>Testing</h1>
</div>
</body>
</html>
`);
} |
Beta Was this translation helpful? Give feedback.
Found a way 🕺 🥳
This is working for me
J…