Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
sails-hook-next
Advanced tools
Readme
Next.js Hook for Sails
The idea is to completely integrate the Next.js framework with a Sails API so that we can have the power of a server-rendered React app and an awesome REST API.
Initialize a Sails project with no frontend:
sails new my-project --no-frontend && cd my-project
Then install the hook using npm. You also need to include its dependencies.
npm install --save sails-hook-next react react-dom next
Create a pages
folder at the root of your project to store your Next.js pages. Example:
// pages/index.js
export default () => (
<div>
<h1>Hello Next.js</h1>
</div>
)
A custom .babelrc
configuration is necessary for Next.js components.
{
"presets": ["next/babel"]
}
For more info see the Next.js documentation or the awesome learnnextjs.com tutorial
The only necessary Sails configuration is that all your API routes are prefixed with /api
.
This can be achieved for blueprints by setting the prefix
key to /api
in your config/blueprints.js
file.
Then just lift your Sails application to run in development mode:
sails lift
To handle custom routes we need to configure a Sails controller to render the correct Next.js page.
Define a route pointing to the controller:
// config/routes.js
module.exports = {
'get /blog/:articleId': 'BlogController.article'
}
Define the controller which calls sails.config.next.app.render()
method passing the route parameters along:
// api/controllers/BlogController.js
module.exports = {
article (req, res) {
const articleId = req.param('articleId')
sails.config.next.app.render(req, res, '/blog', { articleId })
}
}
Define the Next.js blog page which receives the parameters through the query
parameter in the getInitialProps()
method:
// pages/blog.js
const BlogPage = ({ articleId }) => (
<div>
<h1>My {articleId} blog post</h1>
</div>
)
BlogPage.getInitialProps = ({ query: { articleId } }) => {
return { articleId }
}
export default BlogPage
Linking to the blog page using the Next.js Link
component:
// pages/index.js
import Link from 'next/link'
export default () => {
return (
<div>
<h1>Home</h1>
<ul>
<li>
<Link href='/blog?articleId=first' as='/blog/first'>
<a>My first blog</a>
</Link>
</li>
<li>
<Link href='/blog?articleId=second' as='/blog/second'>
<a>My second blog</a>
</Link>
</li>
</ul>
</div>
)
}
You can find more information in the Next.js custom routes documentation and the Sails url-slugs routes documentation.
You can override hook configuration by creating a config/next.js
file in your Sails application.
Default configuration:
module.exports.next = {
// Sails integration options
api: {
// Prefix for all Sails API routes
prefix: '/api'
},
// Next.js instance options. Passed to `next()`.
server: {
// Next.js root directory
dir: '.',
// Dev mode. Is overridden by `process.env.NODE_ENV !== 'production'`
dev: false,
// Hide error messages
quiet: false,
// Equivalent to a `next.config.js` file
conf: {}
}
}
To run in production mode you need to build your Next.js application
next build
If next
is not installed globally you can run it using npx next build
.
Then run Sails in production mode using
NODE_ENV=production node app.js
For more information see the Next.js and Sails deployment documentation.
sails.config.next.app
.sails.config.next.handle
.Don't have a real example using the latest version of sails-hook-next
yet.
If you have an example don't hesitate to add it here by submitting a pull request.
FAQs
Next.js hook for Sails
The npm package sails-hook-next receives a total of 0 weekly downloads. As such, sails-hook-next popularity was classified as not popular.
We found that sails-hook-next demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.