From Jekyll website to Nextjs React+Tailwind Part 1: starter

In the fast-paced world of web development, keeping your website up-to-date is crucial for maintaining performance, security, and user engagement. Many developers and organizations find themselves with legacy websites built on older static site generators like Jekyll. While Jekyll has served us well, modern frameworks like Next.js offer significant advantages in terms of performance, developer experience, and scalability.

This comprehensive guide is the first in a series that will walk you through the process of migrating a legacy website to a modern Next.js application using Typescript language, React and Tailwind packages. We'll cover everything from initial template setup to deployment, ensuring your transition is smooth and your new site leverages the full power of modern web technologies.

Understanding the Need for Legacy Website Migration

Before we dive into the technical details, let's explore why migrating from our legacy Jekyll to Nextjs is a worthwhile endeavor:

  1. Performance Improvements: Next.js and React offers server-side rendering and automatic code splitting, significantly enhancing your site's loading speed and overall performance.

  2. Enhanced Developer Experience: With hot module replacement and a more intuitive project structure, Next.js streamlines the development process. Also an easy deployment using Vercel or Github Actions is a must have.

  3. Scalability: As your site grows, Nextjs provides built-in features like API routes and dynamic imports to handle increased complexity.

  4. Modern JavaScript Features: Next.js allows you to leverage the latest ECMAScript features and TypeScript for improved code quality and maintainability.

  5. Rich Ecosystem: The React and Next.js ecosystems offer a wealth of libraries and tools to extend your site's functionality.

  6. Modern UI: Using Tailwind and Shadcn Ui we get a professional and beautiful website.

  7. SEO Benefits: Server-side rendering and automatic static optimization in Next.js can improve your site's search engine rankings.

Assessing Your Legacy Jekyll Site

Before beginning the migration process, it's essential to thoroughly assess your current site. This evaluation will help you plan your migration strategy and identify potential challenges.

  1. Content Structure: Analyze how your content is organized in our Jekyll Github repository. Are you using collections, categories, or tags? How are your posts and pages structured?

  2. Custom Plugins: Identify any custom Jekyll plugins you're using. You'll need to find Nextjs equivalents or create custom solutions.

  3. Theme and Styling: Evaluate your current theme and CSS framework. Are you using a pre-built theme or custom styles? As we are using Tailwind CSS and Shadcn UI the best is to restart from zero the layout. Using a starter or template available online or on Github it is an easy step.

  4. Build Process: Review your build process, including any pre- or post-processing steps like Github Actions.

  5. Deployment: Understand your current deployment strategy. Are you using GitHub Pages or another hosting solution?

  6. Dynamic Features: Identify any dynamic features implemented in your site, such as search functionality or contact forms. And find corresponding React and or Shadcn component.

Before diving into our starter example, attempt to run the existing site:

bundle exec jekyll serve --draft

If necessary, we should update denpendencies.

sudo gem install bundler

These attempts revealed outdated dependencies and compatibility issues, solidifying the decision to migrate.

Setting Up Your Nextjs with Tailwind & React Project using Shadcn

Now that we've assessed our legacy site, let's set up our Next.js project. We'll use create-next-app to bootstrap our project with some modern tooling.

  1. Requirements:

Create a new Nextjs app using Shadcn starter tool:

  1. Init with Shadcn using: this command will install Next.js with typescript language, react and tailwind packages. You just have to follow the template recommandations.
npx shadcn@latest init
  1. Navigate to your new starter directory:
cd my-app</Snippet
  1. Install Lucide for icons: this packages are beautiful icons for your react project.
npm install lucide-react
  1. Add Shadcn/ui components: A simple starter to show how to install Shadcn ui components. Shadcn ui is based on Tailwind CSS and RadixUI.
npx shadcn@latest add button scroll-area sheet

Template Structure for Migrated Content

Next, let's set up a template structure in our Next.js project to accommodate our migrated Jekyll content:

my-app/
ā”œā”€ā”€ app/
ā”œā”€ā”€ components/
ā”œā”€ā”€ content/
ā”‚   ā”œā”€ā”€ pages/
ā”‚   ā”œā”€ā”€ posts/
ā”‚   ā”œā”€ā”€ drafts/
ā”‚   ā””ā”€ā”€ config.json
ā”œā”€ā”€ lib/
ā”œā”€ā”€ public/
ā””ā”€ā”€ [Next.js config files]

This structure separates our content from our Typescript application code, making it easier to manage and update.

Migrating Content from Jekyll to our starter Nextjs project

Now, let's start migrating our content to our new Next.js starter project:

  1. Copy all your Jekyll posts from _posts/ to content/posts/ in your starter project.

  2. Copy your Jekyll pages (like about.md, contact.md) to content/pages/ in your starter project.

  3. Move your images and other assets from Jekyll's assets/ folder to public/ in your starter project.

  4. Convert _config.yml to config.json:

json./config.json
{
  "title": "@mikbry",
  "author": "Mik Bry šŸ¤–",
  "email": "xxx",
  "description": "Innovative CTO & Founder šŸš€ ā€¢ Rust & Web Full-Stack Expert šŸ’» ā€¢ AI Video & 3D Enthusiast šŸ¤– ā€¢ 25+ Y in Tech šŸ† Team Leadership šŸ‘„ā€¢ Pushing Tech Boundaries āœØ\"",
  "url": "https://mikbry.com",
  "social_links": {
    "github": "mikbry",
    "twitter": "mikbry",
    "linkedin": "mikbry"
  },
  "nav_pages": [
    "projects",
    "blog",
    "about"
  ]
}

Add Typescript Definitions

Create a typescript file ./lib/types.ts:

typescript./lib/types.ts
import { Author } from "next/dist/lib/metadata/types/metadata-types";

export type Configuration = {
  title: string;
  locale: string;
  author: Author;
  email: string;
  description: string;
  base_url: string;
  url: string;
  social_links: {
    github?: string;
    twitter?: string;
    linkedin?: string;
  },
  permalink?: string;
  nav_pages: string[];
}

Local Development and Testing

Start the development server:

npm run dev

Visit http://localhost:3000 to see your new React site in action. Shadcn ui and tailwind css is used to template it.

Conclusion and Next Steps

In this first part of our series on migrating legacy Jekyll websites to Nextjs, we've covered the initial setup and content migration strategies. We've created a solid foundation for our modernized website, including:

  1. Setting up a Nextjs starter project using Shadcn with TypeScript and Tailwind CSS
  2. Creating a template for migrated content
  3. Implementing basic content parsing and rendering
  4. Setting up essential components for our new site

In the next part of this series, we'll dive deeper into rendering our migrated content, implementing dynamic routing for blog posts, and styling our new Nextjs site to match (or improve upon) our original Jekyll design.

By following this migration process, you're not just updating your technology stack ā€“ you're investing in a more scalable, performant, and developer-friendly website. The move from Jekyll to Nextjs opens up a world of possibilities for extending and improving your site, ensuring it remains modern and efficient for years to come.

Stay tuned for the next installment in this starter website migration series!

Bonus the code is available on Github repository!

You could access the starter here: starter part 1