Migrate Medium URLs to Prismic

Developing with Prismic
1

Hello all!
I'm trying to migrate Medium content to Prismic so I can start hosting blog content directly on my website, rather than linking off-site to content. I have a handful of articles with URLs I need to preserve, mainly for analytics reasons. The domain where the blogs are currently hosted via Medium is a custom namespace which I will migrate over to the app.

The current format for the URLs is blog.{domain}.com/{random_article_slug}.

I have two questions:

  • For the blog section of my Prismic app, is there any functionality for maintaining the blog..com structure, rather than having to do .com/blog/{slug} ?

  • Additionally, does Prismic support any method of importing these existing URLs and attaching them to the blog items?

Most of the solutions I have found relate to hardcoding DNS settings and/or managing 301 redirects to have content point to .com/blog, rather than achieving this specific solution.

Role: Developer

Next.js

Package.json file

"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@next/font": "13.1.0",
"@piwikpro/next-piwik-pro": "^1.0.4",
"@piwikpro/react-piwik-pro": "^1.1.1",
"@prismicio/client": "^7.0.0",
"@prismicio/next": "^1.5.0",
"@prismicio/react": "^2.7.4",
"@prismicio/slice-simulator-react": "^0.2.3",
"eslint": "8.30.0",
"eslint-config-next": "13.1.0",
"lodash": "^4.17.21",
"next": "13.4.5",
"next-transpile-modules": "^10.0.0",
"prismic-javascript": "^3.0.2",
"pure-react-carousel": "^1.30.1",
"react": "18.2.0",
"react-countup": "^6.4.1",
"react-dom": "18.2.0",
"react-fast-marquee": "^1.3.5",
"react-icons": "^4.7.1",
"react-marquee-slider": "^1.1.5",
"react-responsive": "^9.0.2",
"react-transition-group": "^4.4.5",
"styled-components": "^5.3.9"
},
"devDependencies": {
"@prismicio/types": "^0.2.7",
"@slicemachine/adapter-next": "^0.3.54",
"slice-machine-ui": "^2.10.0"
}
}

2

Hi @harry.mardirossian13 ,

Thanks for reaching out! Migrating from Medium to Prismic and maintaining your URL structure is a common need, and I’m happy to help clarify your options.

1. Maintaining the blog.{domain}.com Structure

Yes, you can maintain the blog.{domain}.com/{slug} structure! Prismic doesn’t enforce a specific URL structure for your content; the routing is handled by your frontend. You can achieve this by:

• Setting up a subdomain blog.{domain}.com and pointing it to your app.

• Configuring your router in your web app to use the desired structure (blog.{domain}.com/{slug}). For instance, if you’re using a framework like Next.js, Nuxt.js, or SvelteKit, you can define custom routes that align with this structure.

Since Prismic acts as your content repository, you have full flexibility to implement the structure you need.

2. Importing Existing URLs

Prismic doesn’t natively import URLs, but you can manage this easily by:

• Using a “UID Field” in your Blog Custom Type: Add a field (e.g., UID) where you can store the existing Medium URL. This is especially helpful for analytics tracking or preserving references.

• Automating Import via the Prismic Import API: Export your Medium articles in structured JSON, then you can use Prismic’s Import API to create documents in bulk. Include the original slugs/URLs in your structured data to attach them directly to your Prismic content, specifically the UID field for the blog URL.

• DNS and Redirects: While it sounds like you’re looking to avoid 301 redirects, they can be a temporary solution while you transition traffic to your Prismic-powered site.

If you’d like guidance on setting up the Import API or defining custom routes in your web app, let me know—I’d be happy to assist!

Best regards,
Prismic Support Team

3

Thanks for the rapid response, @Phil ! I could definitely use more information on the custom routes. I don't have many articles to migrate, so I'll probably do those manually for additional testing purposes.

For more context on routing:

I'm using Prismic with Next.js Pages Router (not App Router). The integration is set up using:

  • @prismicio/react for the Provider
  • @prismicio/next for Preview functionality
  • Standard Next.js Pages Router structure with _app.js as the application wrapper

The links follow standard hierarchical structure where the root is the home page:

The project uses a custom link resolver that handles several content types with specific routing patterns:

  • Homepage (/)
  • Generic pages (/{uid})
  • Portfolio landing (/portfolio)
  • Team landing (/team)
  • Company pages under portfolio (/portfolio/{uid})
  • Employee profiles under team (/team/{uid})

I would love any additional insight on the custom routing.

  • For a subdomain, my client already has one. Would I need to have them set specific rules pointing to the main page, and then set some kind of rule in the DNS provider that passes the url along to a page that translates the request within my Next.JS?
  • Is there a way to simulate the subdomain behavior locally before actually turning the keys on the DNS provider?
  • Would I need to dedicate a specific file for routing these? Would I just be passing requests to my standard router and then handling an internal redirect?

The whole concept of unifying the main domain and the subdomain is a newer one for me, so any information or advice you can provide is much appreciated!

4

Thanks for providing the additional details!

All of the routing information for Prismic and Next.js is documented here:

I’m happy to help clarify how to configure custom routing to meet your needs. Let’s break it down:

Custom Routing with Next.js

Since you’re using the Pages Router, you have the flexibility to define custom routes. The Prismic documentation provides an excellent guide for defining custom paths in Next.js, which aligns well with your project structure.

To maintain your blog.{domain}.com/{slug} routing, you can use a combination of Next.js dynamic routes and Prismic’s Link Resolver:

  1. Update the Link Resolver

In your prismicio.js (or equivalent), extend your linkResolver function to handle blog-specific routing. For example:

export const linkResolver = (doc) => {

if (doc.type === 'blog') {
return `/${doc.uid}`; *// Adjust if you want to add other paths*
}

*// Other content types*
return `/${doc.uid}`;

};
  1. Create a Dynamic Route for Blogs

Add a [uid].js file under a pages folder for blogs. For example:

pages/blog/[uid].js

This file will fetch and display your blog content based on the uid.

  1. Custom Subdomain Routing

In your _app.js, use middleware or server-side logic to detect the blog.{domain}.com subdomain and route requests to the appropriate page dynamically. For example, you could set a basePath or handle conditional rendering based on the subdomain.

Subdomain DNS Rules

Your client will need to set up DNS rules to point blog.{domain}.com to your application. Here’s how it works:

  1. DNS Setup:

  • Set up a CNAME or A record for blog.{domain}.com pointing to your application hosting provider (e.g., Vercel if you’re using it for Next.js).

  • In Vercel (or equivalent), add the subdomain as an alias for the project.

  1. Request Handling in Next.js:

• Use middleware or API logic to check the host header for requests to blog.{domain}.com and conditionally serve the blog content.

  1. Simulating Locally:

To simulate this locally:

  • Update your hosts file to point blog.localhost to 127.0.0.1.

  • Use a local development tool like localtunnel or ngrok to mimic subdomain routing.

File Structure

To unify the main domain and subdomain, you don’t need a completely separate routing file, but here’s how to handle it within your existing structure:

  • Define dynamic route files as needed ([uid].js, blog/[uid].js, etc.).

  • Use middleware or logic in getServerSideProps to map requests to subdomain-specific routing.

  • Ensure your linkResolver and href functions in @prismicio/next generate the correct paths for previews and navigation.

Internal Redirects

If needed, you can also use Next.js redirects for any edge cases. Add them in your next.config.js:

module.exports = {
async redirects() {
return [
{
source: '/:slug',
destination: '/blog/:slug', *// Adjust as needed*
permanent: true,
},
];
},
};

If you have more specific questions or run into any challenges during setup, let me know—I’d be happy to walk you through any part of the process.