DEV Community

Cover image for Deploying a Static Next.js Site to Railway
Mark Munyaka
Mark Munyaka

Posted on

Deploying a Static Next.js Site to Railway

#webdev #railway #nextjs

Introduction

Next.js is a React framework for building web apps. Railway is a platform for hosting web apps. This guide shows you how to host a static Next site on Railway.

Prerequisites

  • GitHub Account
  • Railway Account
  • Node.js

Create Next app

In your local machine, create a new folder named my-app.

mkdir my-app
Enter fullscreen mode Exit fullscreen mode

Install react, react-dom, and next as npm dependencies.

npm install next@latest react@latest react-dom@latest
Enter fullscreen mode Exit fullscreen mode

Open your package.json file and add the following npm scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.2.15",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Create an app folder, then add a layout.tsx and page.tsx file.

mkdir app && touch app/layout.tsx app/page.tsx
Enter fullscreen mode Exit fullscreen mode

Create root layout inside app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
Enter fullscreen mode Exit fullscreen mode

Create home page, app/page.tsx:

export default function Page() {
  return <h1>Hello World!</h1>
}
Enter fullscreen mode Exit fullscreen mode

Run the development server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:3000 to view your site.

lynx localhost:3000
Enter fullscreen mode Exit fullscreen mode

Build Next App

Stop your server by pressing CTRL plus C on your keyboard.

Add a static export configuration to your Next.js app. Create a next.config.js file:

touch next.config.js
Enter fullscreen mode Exit fullscreen mode

Add this to next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig
Enter fullscreen mode Exit fullscreen mode

Build your application:

npm run build
Enter fullscreen mode Exit fullscreen mode

Next.js will produce an out folder which contains the HTML/CSS/JS assets for your application.

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli
Enter fullscreen mode Exit fullscreen mode

Login to your Railway account:

railway login --browserless
Enter fullscreen mode Exit fullscreen mode

Create a new Railway project:

railway init
Enter fullscreen mode Exit fullscreen mode

Link the out folder to your Railway project.

Change working directory to out.

cd out
Enter fullscreen mode Exit fullscreen mode

Link current directory, i.e. out to your Railway project.

railway link
Enter fullscreen mode Exit fullscreen mode

Deploy your app.

railway up --detach
Enter fullscreen mode Exit fullscreen mode

When the site is ready, generate a domain.

railway domain
Enter fullscreen mode Exit fullscreen mode

Test Deployment 

lynx <YOUR-APP-DOMAIN>
Enter fullscreen mode Exit fullscreen mode

Update Site and Redeploy

Update home page, app/page.tsx:

export default function Page() {
  return (
    <main>
      <h1>Hello World!</h1>
      <p>Happy to be here</p>
    </main>
  )
}
Enter fullscreen mode Exit fullscreen mode

Test update locally:

cd .. && npm run dev
Enter fullscreen mode Exit fullscreen mode

Rebuild site:

npm run build
Enter fullscreen mode Exit fullscreen mode

Redeploy to Railway.

cd out && railway up --detach
Enter fullscreen mode Exit fullscreen mode

Top comments (0)