Soya Next is a set of utility functions for React applications built on top of Next.js.
To start using Soya Next, you need to be familiar with the following:
A little bit of the following:
And optionally:
.mod.css or .module.css suffix from your react component's JS file. You can also use SCSS in CSS module files with .mod.scss or .module.scss suffix.<Link>, use <LocaleLink> (see API for more information). This link component is already locale aware.This is a quick start to help you bootstrap soya-next project in no time. It should cover everything in the getting started section.
npm install -g soya-next-cli
soya-next-cli app-name
cd app-name
npm start
You are done! Open http://localhost:3000 in your browser to see your app running.
Soya Next requires Express.js, Next.js, React, React-Cookie, React-Redux, and Redux to be installed, run the following to install them:
npm install --save express next react react-cookie react-dom react-redux redux
To install Soya Next, run the following:
npm install --save soya-next
In your project root directory, create next.config.js with the following:
const { createNextConfig } = require('soya-next');
module.exports = createNextConfig();
This will configure your app to support CSS modules, SASS, image import, and global app configuration.
In your project root directory, create server.js with the following:
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const { createRouter } = require('soya-next/server/router');
app.prepare()
.then(() => {
const server = express();
server.use(createRouter(app));
server.listen(3000, err => {
if (err) {
throw err;
}
console.log('> Ready on http://localhost:3000');
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
Then, create a directory called pages and add index.js as a sample page into it with the following:
import Head from 'next/head';
import { createPage } from 'soya-next';
const IndexPage = () => (
<div>
<Head><title>Soya Next Project</title></Head>
<p>This is your project homepage</p>
</div>
);
export default createPage()(IndexPage);
That's it!
To start your app run the following:
node server.js
To use npm start or yarn start instead, add the following to your package.json:
{
"scripts": {
"start": "node server.js"
}
}
Open http://localhost:3000 in your browser.
You can read the API documentation here.
applyReducers([reducers])createDocument()createNextConfig([nextConfig])createPage([...connectArgs])(Page, [reducers])createRouter(app, [options])withLocale()<LocaleLink />FAQs
A set of utility functions for React applications built on top of Next.js.
The npm package soya-next receives a total of 165 weekly downloads. As such, soya-next popularity was classified as not popular.
We found that soya-next demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.