Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

soya-next

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

soya-next

A set of utility functions for React applications built on top of Next.js.

  • 0.2.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
165
increased by28.91%
Maintainers
1
Weekly downloads
 
Created
Source

Soya Next

Soya Next is a set of utility functions for React applications built on top of Next.js.

Table of Contents

Prerequisites

To start using Soya Next, you need to be familiar with the following:

  • React - A javascript library for building user interfaces
  • Next.js - A minimalistic framework for server-rendered React applications

A little bit of the following:

And optionally:

  • Redux - Predictable state container for JavaScript apps

Differences from vanilla Next.js

  • CSS modules already configured. You just need to import CSS with .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.
  • Asset as modules already configured. You can import any images, svg and fonts from your JS and CSS files and it will automatically be resolved to a hashed asset URL.
  • Easy application configuration based on environment (see Node Config).
  • Universal cookie access already configured using React Cookie.
  • Redux already configured (usage is optional). See Redux example for more information.
  • Instead of using <Link>, use <LocaleLink> (see API for more information). This link component is already locale aware.
  • Custom routing supports locale, and redirection for obsolete pages.
  • Gzip compression always enabled in production.
  • CLI provided for easy setup.
  • On-the-fly linter based on Traveloka style guide.

Quick Start Guide

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.

Documentation

Getting Started

Installation

Soya Next requires Next.js, React, React Cookie, React Redux, Redux, and Soya Next Scripts to be installed, run the following to install them:

npm install --save next react react-cookie react-dom react-redux redux soya-next-scripts

To install Soya Next, run the following:

npm install --save soya-next
Configuration

You don't need to configure anything because everything is already configured in soya-next-scripts. It will configure your app to support CSS modules, SASS, image import, global app configuration, and on-the-fly linting.

In your project root directory, simply add the following to package.json:

{
  "scripts": {
    "build": "soya-next-scripts build",
    "eject": "soya-next-scripts eject",
    "start": "soya-next-scripts start",
    "test": "soya-next-scripts test"
  }
}
Build your app

In your project root directory, create pages/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!

Start your app

To start your app run the following:

npm start
# or
yarn start

Open http://localhost:3000 in your browser.

API

You can read the API documentation here.

Examples

Keywords

FAQs

Package last updated on 08 Aug 2017

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc