Advanced setup: Next.js web application creation and publication¶

This tutorial explains how to develop a frontend-only Next.js application in a Dataiku Code Studio. It uses the default application generated by create-next-app, the Code Studio Frontend tab for development, and the NGINX tab to preview a build.

This tutorial does not cover a backend. If your application needs one, configure it separately in the Code Studio template.

Prerequisites¶

You need a Code Studio template configured by following the configuring Code Studio tutorial.

This tutorial uses Next.js’s default port, 3000, which must match the port exposed by the frontend entrypoint. We’re also using the app name my_app as specified in the Code Studio tutorial.

Create the Next.js application¶

Go to </> > Code Studios, create a Code Studio from your template, and start it. Open a terminal in Visual Studio Code, then create the application in the code_studio-resources directory:

cd code_studio-resources
npx create-next-app@latest my_app --use-npm --yes

Install the dependencies:

cd my_app 
npm install

The commands create the default Next.js application in code_studio-resources/my_app.

Configure the application for Code Studio¶

In code_studio-resources/my_app, replace the contents of the next.config.ts file created by create-next-app with the following configuration:

import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import type { NextConfig } from 'next';

const here = dirname(fileURLToPath(import.meta.url));
const isProd = process.env.NODE_ENV === 'production';
const INSTANCE_URL = 'add-your-instance-url'; // replace this with your instance url (exclude https://)

const nextConfig: NextConfig = {
    allowedDevOrigins: [INSTANCE_URL],
    ...(isProd
        ? {
              output: 'export',
              assetPrefix: './',
          }
        : { assetPrefix: process.env.DKU_CODE_STUDIO_BROWSER_PATH_3000 || '' }),
    turbopack: {
        root: here,
    },
    images: {
        unoptimized: true,
    },
};

export default nextConfig;

This configuration uses the Code Studio port prefix during development and creates a static export during builds. DKU_CODE_STUDIO_BROWSER_PATH_3000 is set by Dataiku in the Code Studio pod and holds the path the Frontend tab is served under; change the variable name if you expose a port other than 3000. A static export has no server to optimize images at request time, so images.unoptimized is required for the build to succeed.

The config file also has a constant you need to replace, which is the INSTANCE_URL constant. This is used for the NextJS socket connection. This should be your instance URL without https:// and without a leading slash. For example, https://dataiku.mycompany.com/projects/nextjs should be entered as dataiku.mycompany.com.

Note

The stock create-next-app template uses leading-slash public-asset paths such as /next.svg, /vercel.svg. As this is the default way the NextJS template is configured, to get it to work, alter the paths to be relative by replacing the / with ./ and the SVGs should load accordingly.

Preview the application¶

Start the development server:

cd /home/dataiku/workspace/code_studio-resources/my_app
npm run dev

Open the Frontend tab in Code Studio to view the application. Changes to the files are reflected by the Next.js development server.

Use the Frontend tab for the Code Studio preview. No hostname, port, or path-prefix arguments are required for this setup.

Preview the build with NGINX¶

The NGINX entrypoint serves static files. Build the application by running this command in the my_app directory.

npm run build

The build writes the static application to the out directory. The NGINX configuration serves this directory, so you can open the NGINX tab to preview the build.

Optional publication and path handling¶

When you are ready to publish, open the Actions panel on the right of the Code Studio page, click Publish, and select NGINX as the entrypoint to show. Custom deployment paths and non-static Next.js features need additional configuration, which is outside this workflow.

Wrapping up¶

You now have a frontend-only Next.js application that you can edit in Code Studio, preview in the Frontend tab, and build for the NGINX tab. You can add pages and components using normal Next.js development practices. If you want add server-dependent Next.js features, such as server-side rendering, you have to adapt the template and publication architecture accordingly; the static-export setup in this tutorial supports only features compatible with output: "export".