Posts

Dynamically import class with no SSR in Next.js

In this tutorial, I will show you how to dynamically import class with no SSR in Next.js.

Probably you already have seen this Next.js documentation regarding dynamically importing component with no SSR. But the problem with this is that it can only be used on React components, but what if we need to dynamically import a non-React component class?

This guide will show you how. I will use FullCalendar plugin called FullCalendar interaction as this has a class that I need to dynamically import to make it work. (READ: How to use FullCalendar in Next.js)

Step 1: Initialize a Next.js project

Initialize a Next.js project by running the following commands in the terminal.

mkdir import-class-nextjs
cd import-class-nextjs
touch package.json

Paste the following inside package.json that we have created.

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Install the necessary Next.js packages by running the following command in the terminal.

npm install --save next react react-dom

Let’s create an index or landing page for our project using the following commands.

mkdir pages
touch pages/index.js

Page the following inside pages/index.js that we have created.

export default function Home() {
  return <div>Welcome to Next.js!</div>
}

This is just a simple component for our landing page which just returns a single div component.

Step 2: Dynamically import class with no SSR

Install the package that you need. In this example, we are going to use FullCalendar interaction plugin.

npm install --save @fullcalendar/core @fullcalendar/interaction

If you tried to import this the usual way (import interactionPlugin from '@fullcalendar/interaction') you will get an error Element is not defined as Element is non-existent on the server side rendering.

The solution is to make sure that the window is already defined when you import the package.

Since Next.js is a React framework we can take advantage of using componentDidMount if you are using class components or useEffect when using functional components.

The importing of package can be written as follows.

import { useEffect } from 'react'



export default function Home() {

  useEffect(() => {
    dynamicallyImportPackage()
  }, [])

  let dynamicallyImportPackage = async () => {
    const FullCalendarInteraction = await import('@fullcalendar/interaction')

    // you can now use the package in here
  }

  return <div>Welcome to Next.js!</div>
}

That’s it, we have now successfully imported a non-React component class with no SSR in Next.js.

How to use FullCalendar in Next.js

In this tutorial, we would be learning on how to use FullCalendar in Next.js.

You might have been able to come here because you have encountered an error Element is not defined when you are trying to use FullCalendar in Next.js project.

Before we proceed with the solution, I will just point out the cause of that error.

Next.js renders the page on the server side. Since it was on the server side, window is not available as it is only available on the client side. If the window is not available, then the element is also not available.

Now that we understand the problem, let’s proceed with the solution.

Step 1: Initialize a Next.js project

Let’s start with initializing our Next.js project by running the following commands in the terminal.

mkdir nextjs-fullcalendar
cd nextjs-fullcalendar
touch package.json

In the package.json that we have created, paste the following.

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

In the terminal, install Next.js by running the following command.

npm install --save next react react-dom

Now, let’s create our landing page. Run the following commands in the terminal.

mkdir pages
touch pages/index.js

In the file pages/index.js, paste the following.

export default function Home() {
  return <div>Welcome to Next.js!</div>
}

We just created a Home component that simply shows a short message on our landing page.

Step 2: Setup Next.js CSS support

Since FullCalendar has custom CSS, we must setup our Next.js project to support CSS.

In the terminal run the following.

npm install --save node-sass @zeit/next-sass @zeit/next-css
touch next.config.js

In the file next.config.js, paste the following.

const withSass = require('@zeit/next-sass')
module.exports = withSass()

Step 3: Install FullCalendar

Now, let’s install FullCalendar to our project. Run the following command in the terminal.

npm install --save @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid

Let’s create an SCSS file for the FullCalendar CSS by running the following commands in the terminal.

mkdir styles
touch styles/calendar.scss

In the file styles/calendar.scss, paste the following.

@import '[email protected]/core/main.css';
@import '[email protected]/daygrid/main.css';
@import '[email protected]/timegrid/main.css';

Step 4: Create your own no SSR FullCalendar component

Let’s start by creating a directory for our components. Run the following commands in the terminal.

mkdir components
touch components/fullcalendar.js

In the file components/fullcalendar.js, paste the following.

import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'

import '../styles/calendar.scss'

let CalendarComponent



export default function FullCalendar(props) {

  const [calendarLoaded, setCalendarLoaded] = useState(false)

  useEffect(() => {
    CalendarComponent = dynamic({
      modules: () => ({
        calendar: import('@fullcalendar/react'),
        dayGridPlugin: import('@fullcalendar/daygrid'),
        timeGridPlugin: import('@fullcalendar/timegrid')
      }),
      render: (props, { calendar: Calendar, ...plugins }) => (
        <Calendar {...props} plugins={Object.values(plugins)} ref={props.myRef} />
      ),
      ssr: false
    })

    setCalendarLoaded(true)
  })

  let showCalendar = (props) => {
    if ( !calendarLoaded ) return <div>Loading ...</div>

    return (
      <CalendarComponent {...props} />
    )
  }

  return (
    <div>
      {showCalendar(props)}
    </div>
  )

}

The problem that we have is that Next.js renders our page in the server. In the docs, there is a way to dynamically import packages with no ssr.

We simply imported the FullCalendar component dynamically using Next.js’s dynamic function with an attribute ssr: false to make sure that it is not rendered on the server.

We also imported it in React’s useEffect() hook just to be sure that the window is already defined.

Step 5: Use our own FullCalendar component

In the file pages/index.js, paste the following.

import FullCalendar from '../components/fullcalendar'



export default function Home() {
  return (
    <div>
      <FullCalendar defaultView='dayGridMonth' />
      <FullCalendar defaultView='timeGridWeek' />
    </div>
  )
}

Now if you run npm run dev in the terminal and navigate to http://localhost:3000 in your browser, you should be able to see the two (2) calendars, one in month view and one in week view rendered properly without any errors.

TL;DR

Install FullCalendar using the following command.

npm install --save @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid

Import the CSS in your styles.

@import '[email protected]/core/main.css';
@import '[email protected]/daygrid/main.css';
@import '[email protected]/timegrid/main.css';

Dynamically import FullCalendar with no SSR and use the component in your project.

import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'

import '../styles/calendar.scss'

let FullCalendar



export default function Home(props) {

  const [calendarLoaded, setCalendarLoaded] = useState(false)

  useEffect(() => {
    FullCalendar = dynamic({
      modules: () => ({
        calendar: import('@fullcalendar/react'),
        dayGridPlugin: import('@fullcalendar/daygrid'),
        timeGridPlugin: import('@fullcalendar/timegrid')
      }),
      render: (props, { calendar: Calendar, ...plugins }) => (
        <Calendar {...props} plugins={Object.values(plugins)} ref={props.myRef} />
      ),
      ssr: false
    })

    setCalendarLoaded(true)
  })

  let showCalendar = (props) => {
    if ( !calendarLoaded ) return <div>Loading ...</div>

    return (
      <FullCalendar {...props} />
    )
  }

  return (
    <div>
      {showCalendar(props)}
    </div>
  )

}

That’s it, we have learned on how to use FullCalendar in Next.js project.

Reference: Using fullcalendar with Next.js

pass value from javascript to php

How to pass value from JavaScript to PHP

In this tutorial we would be learning on how to pass value from JavaScript to PHP.

Are you looking for PHP to JavaScript and not this one? You might want to view How to pass value from PHP to JavaScript instead.

Step 1: Create an HTML file.

For this example, we would create an HTML file named index.html, this file will contain our client-side scripts.

Step 2: Include a jQuery file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

We would be needing this additional library to perform asynchronous communication with the server from the browser or client.

Step 3: Declare the JavaScript variable.

<script>     
  var myJsVar = 'Hello World!'; 
</script>

In this example we would be passing the string Hello World! from JavaScript to PHP.

Step 4: Create a PHP file.

You need to create a PHP file that will contain our server-side scripts. For this example, we would be creating a file named ajax.php in the same directory with the file created in Step 1.

Step 5: Declare the PHP variable.

<?php     
  $my_php_var = ''; 
?>

This PHP variable is initialized in the file ajax.php.

Step 6: Create an AJAX call.

$.ajax({     
  type: 'POST',     
  url: 'ajax.php',     
  data: {
    myJsVar: myJsVar     
  },     
  success: function(response) {     
    // do something on success response
  },     
  error: function(response) {     
    // do something on error response
  } 
});

You should include this code after the declaration of our JavaScript variable. The method type that will be using is POST.

If you are familiar with the form method is that there are POST and GET methods, the type in this are just the same.

The value for the url is the file that we have created in Step 4.
The value for the data is the variable name of our JavaScript variable declared in Step 3.

For the success and error function, you can handle the result of our AJAX call. If the call succeeds then do something in the success function, and the same with the error function, just in case our script fails.

Step 7: Assign the JS variable to the PHP variable.

<?php      
  $my_php_var = $_POST['myJsVar']; 
?>

Since the value for the data in Step 6 is myJsVarand the type is POST we would be using the POST variable in the server-side containing the variable for data.

Complete code:

index.html

<!DOCTYPE html>
<html>     
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>     
  <script>         
    var myJsVar = 'Hello World!';         

    $.ajax({             
      type:'POST',             
      url: 'ajax.php',             
      data: {                 
        myJsVar: myJsVar             
      },             
      success: function(response) {                 
        // do something on success response         
      },             
      error: function(response) {                 
        // do something on error response  
      }         
    });     
  </script>
</html>

ajax.php

<?php     
  $my_php_var = $_POST['myJVar']; 
?>

That’s it, we have successfully passed the value from JavaScript to PHP. I hope you learned something.

pass value from PHP to JavaScript

How to pass value from PHP to JavaScript

In this tutorial we would be learning on how to pass value from PHP to JavaScript.

Are you looking for JavaScript to PHP and not this one? You might want to view How to pass value from JavaScript to PHP instead.

Step 1: Declare the PHP variable.

<?php     
  $my_php_var = 'Hello World!'; 
?>

In this example, we would be using a string variable named $my_php_var containing the string Hello World!

Step 2: Declare the JavaScript variable.

<script>     
  var myJsVar = ''; 
</script>

The JavaScript variable named myJsVar will be the one to receive the data from the PHP variable that we have created in Step 1.

Step 3: Assign the PHP variable to the JS variable.

<script>     
  var myJsVar = '<?php echo $my_php_var; ?>'; 
</script>

The PHP variable containing Hello World! is now assigned to our JavaScript variable named myJsVar.

Complete code:

<!DOCTYPE html> 
<html>     
  <?php         
    $my_php_var = 'Hello World!';     
  ?>    
  <script>         
    var myJsVar = '<?php echo $myPHPVar; ?>';    
  </script> 
</html>

If you might want to check if the variable myJsVar really contains the string Hello World!, you can do it using the JavaScript functions alert() or console.log(). Personally, I would recommend using console.log() and see the output in the console.

Basic usage:

console.log(myJsVar); //Hello World!

This should print the string Hello World! in the console tab of your debugging tools.

That’s it I hope you have learned something from this tutorial.