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
Install react, react-dom, and next as npm dependencies.
npm install next@latest react@latest react-dom@latest
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"
}
}
Create an app folder, then add a layout.tsx and page.tsx file.
mkdir app && touch app/layout.tsx app/page.tsx
Create root layout inside app/layout.tsx:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Create home page, app/page.tsx:
export default function Page() {
return <h1>Hello World!</h1>
}
Run the development server.
npm run dev
Visit http://localhost:3000 to view your site.
lynx localhost:3000
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
Add this to next.config.js:
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
output: 'export',
}
module.exports = nextConfig
Build your application:
npm run build
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
Login to your Railway account:
railway login --browserless
Create a new Railway project:
railway init
Link the out folder to your Railway project.
Change working directory to out.
cd out
Link current directory, i.e. out to your Railway project.
railway link
Deploy your app.
railway up --detach
When the site is ready, generate a domain.
railway domain
Test Deployment
lynx <YOUR-APP-DOMAIN>
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>
)
}
Test update locally:
cd .. && npm run dev
Rebuild site:
npm run build
Redeploy to Railway.
cd out && railway up --detach
Top comments (0)