• Stars
    star
    113
  • Rank 310,115 (Top 7 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Next.js With Sequelize Web Application.

Next.js with Sequelize a Full-Stack Web Application

Next.js is a production ready React framework that allows you to combine with other tools from Node.js ecosystem. Sequelize an easy-to-use multi SQL dialect ORM (Object Relation Mapping) for Node.js ecosystem framework application.

Sequelize Next.js

A short brief about what is Sequelize, RDBMS and ORM

  • Sequelize

    Sequelize is a Node.js module that allows you to connect RDBMS databases in your Node.js Application. Sequelize used to be combined with Express.js framework Web Application a popular Node.js framework.

  • RDBMS

    RDBMS (Relational Data Base Management System) is a database system that allows you to have a relationship data between tables. Usually it takes a primary key and a foreign key to connect the data between tables. RDBMS databases includes MySQL, MsSQL, PostGre, Sqlite and many others.

  • ORM

    ORM (Object Relation Mapping) is a terms in database system that have a methods or functions to mapped all data in relationship between database tables. Common queries methods in ORM are hasMany , belongsTo , hasOne and belongsToMany. Other web programming language such as PHP Laravel Framework had already adopted ORM (Eloquent).

So did all of these were related? Absolutely yes! In a Full-stack Web Application these tools were heavily used to make all the system running.

Create your Next.js project

npx create-next-app or just create-next-app. Install it if you haven't npm i create-next-app

Install sqlite3 and Sequelize

Install sequelize-cli

npm i -g sequelize-cli or yarn global add sequelize-cli

Install sequelize

npm i sequelize or yarn add sequelize and sequelize init

Install sqlite3 driver

npm i sqlite3 or yarn add sqlite3

Install mysql driver

npm i mysql2 or yarn add mysql2

Install postgres driver

npm i pg pg-hstore or yarn add pg pg-hstore

package.json

{
  "name": "nextjs-sequelize",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "js-cookie": "^2.2.1",
    "jsonwebtoken": "^8.5.1",
    "mysql2": "^2.1.0",
    "sqlite3": "^5.0.0",
    "next": "9.4.4",
    "next-connect": "^0.7.1",
    "nprogress": "^0.2.0",
    "pg": "^7.0.0",
    "pg-hstore": "^2.3.3",
    "postcss-preset-env": "^6.7.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "sequelize": "^5.21.11"
  }
}

Create a Sqlite3 database in /db/nextjs-sequelize.db and start database migration commands:

  • Users model

    sequelize model:create --name users --attributes firstName:string,lastName:string,username:string,email:string,phoneNumber:string,gender:string,status:boolean

  • Users model seed

    sequelize seed:generate --name users

  • Posts model

    sequelize model:create --name posts --attributes userId:integer,title:string,slug:string,content:text,status:boolean

  • Posts model seed

    sequelize seed:generate --name posts

  • Add Associations * do not execute before you edit the seeder files.

    sequelize migration:generate --name add-post-associate

Open seeders files and modify.

  • ./seeders/xxxxxxxxxxx-users.js
'use strict';
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.bulkInsert('Users', [
      {
        username: 'johndoe1',
        firstName: 'John',
        lastName: 'Doe 1',
        email: '[email protected]',
        password:
          '$2y$10$mj1OMFvVmGAR4gEEXZGtA.R5wYWBZTis72hSXzpxEs.QoXT3ifKSq', // password
        status: 1,
        gender: 'f',
        phoneNumber: '0239239249239',
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ]);
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete('Users', null, {});
  },
};
  • ./seeders/xxxxxxxxxxx-posts.js
'use strict';
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.bulkInsert('Posts', [
      {
        title: 'Title post one',
        slug: 'title-post-one',
        userId: 1,
        content: 'Text content post one',
        status: 1,
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ]);
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete('Posts', null, {});
  },
};

sequelize database migration and seed command

sequelize db:migrate

sequelize db:seed:all

sequelize undo database migration and seed command

sequelize db:migrate:undo:all

sequelize db:seed:undo:all

Start the Next.js dev server and open up http://localhost:3000/

yarn dev

==================================================================================

All logos, trademarks and registered trademarks are the property of their respective owners.

More Repositories

1

nextjs-reactstrap

Next.js with Reactstrap (React dashboard web application with Bootstrap 4 Components from Reactstrap).
JavaScript
51
star
2

nextjs-jwt

JWT authentication in Next.js application
JavaScript
22
star
3

gulp-twig-scss

Gulp, Twig and SCSS
CSS
17
star
4

decorplus.id

Decorplus.id website
CSS
3
star
5

lenovo-thinkpad

Lenovo Thinkpad Landing Page
JavaScript
2
star
6

bootstrap-extends

Lists of extending Bootstrap SCSS Library
CSS
2
star
7

button-icons-hover

Bootstrap 4 SCSS - Button Icon Hover Reveal
HTML
2
star
8

sanity-translation-examples

Studio with Localization
JavaScript
1
star
9

nextjs-tailwindcss-website

A Nextjs Website with Tailwindcss
JavaScript
1
star
10

doctors.json

Json for doctor data
1
star
11

nextjs-nextseo-web

Next.js with Next-Seo Web
JavaScript
1
star
12

react-mvp-test

https://react-mvp-test.vercel.app/
JavaScript
1
star
13

nuxtjs-i18n-app

Vue
1
star
14

laravel_apanel

Laravel Admin Panel CMS Starter
PHP
1
star
15

d3-app

My Company Laravel Website
CSS
1
star
16

lenovo-thinkpad-gulp

JavaScript
1
star
17

nuxtjs-tailwind-website

A Nuxt.js Website with @nuxt/content and Tailwindcss. https://nuxtjs-tailwind-website.vercel.app/
Vue
1
star
18

strapi-i18n-mysql

JavaScript
1
star
19

dentsu.digital.ci3

Dentsu Digital CMS with upgraded CodeIgniter 3.0.3 Version
HTML
1
star
20

dyarfi.github.io

Vue
1
star
21

api-v1

API V1 - App
API Blueprint
1
star
22

nuxtjs-netlifycms-application

Vue
1
star
23

docker-nextjs

Next.JS App in Docker container
JavaScript
1
star
24

strapi-i18n-nuxtjs

A Strapi Multilanguage i18n Website with NuxtJS
JavaScript
1
star
25

dyarfi

Readme Profile
1
star
26

gulp-with-purgecss

Gulp.js 4 with Scss, Twig and PurgeCSS
SCSS
1
star
27

create-reactstrap-app

Create React App with Reactstrap. Web dashboard template. https://create-reactstrap-app.now.sh
JavaScript
1
star
28

gerimis-app

TailwindCSS with VueJS Weather Web App with OpenWeatherMap, Google Map Embed API with navigator online api, HackerNews API, Quotable API, navigator geolocation api and local storage : https://gerimis-app.vercel.app/
Vue
1
star