Next .js run function/script when starting app

In Next.js, if you wish to execute certain functions or scripts during application startup, there are multiple approaches available, depending on your specific use cases and timing requirements. Below are several common methods:

1. Using getServerSideProps or getStaticProps

If you want to run certain code on every page request or during build, you can use getServerSideProps (server-side rendering) or getStaticProps (static generation).

Example:

For instance, if you need to fetch data from an API before rendering the homepage:

jsx
// pages/index.js
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  // Execute additional required functions
  customFunction();
  return {
    props: { data }, // Pass data as props to the page component
  };
}
function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to our website</h1>
      <p>{data.message}</p>
    </div>
  );
}
export default HomePage;
function customFunction() {
  console.log("This function is executed on each page request");
}

2. Running code in _app.js

If you wish to run code during application initialization, you can add logic in the _app.js file, which controls the initialization of Next.js applications.

Example:

For example:

jsx
// pages/_app.js
function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    // This code runs on the client side after page load
    console.log("Application started");
  }, []);
  // Perform API calls or other server-side logic
  serverInitFunction();
  return <Component {...pageProps} />;
}
export default MyApp;
function serverInitFunction() {
  console.log("This function runs on the server side, on each new request");
}

3. Using a custom server.js file

For more complex scenarios, such as connecting to a database or executing initialization scripts that run only once at startup, you can use a custom Node.js server.

Example:

For instance:

javascript
// server.js
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
  const server = express();
  server.get('*', (req, res) => {
    return handle(req, res);
  });
  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
    // Run startup script
    startupFunction();
  });
});
function startupFunction() {
  console.log("This function runs at application startup, only once");
}

By using these methods, you can run various functions and scripts during Next.js application startup as needed.