Next.js网站数据采集实战：破解现代前端框架爬虫难题

1. 项目背景与挑战

最近接手了一个尼日利亚橡胶塑料及印刷包装展的参展商数据采集项目，目标网站采用了Next.js框架构建。刚拿到需求时觉得就是个常规爬虫任务，真正上手才发现现代前端框架给数据采集带来的挑战远超预期。这个项目让我深刻体会到，传统爬虫技术在现代Web应用面前已经显得力不从心。

网站采用了典型的前端路由+服务端渲染架构，页面内容动态加载，常规的HTML解析完全失效。更棘手的是，展商数据以复杂嵌套的JSON结构存储，其中还混杂着HTML标签，分页逻辑也不同于传统参数递增模式。经过两周的攻坚，最终我们突破了四大技术难关，今天就把这些实战经验分享给大家。

2. 技术难点全景分析

2.1 Next.js数据架构解析

Next.js应用最显著的特点是将页面初始状态存储在__NEXT_DATA__脚本标签中。这个JSON对象就像个黑匣子，包含了当前路由、组件props和所有动态加载的数据。我们的首要任务就是破解这个数据结构。

通过Chrome开发者工具分析，发现目标网站的展商数据被嵌套在props.pageProps.dehydratedState.queries路径下。这里有个坑：不同Next.js版本的数据结构可能有差异，需要针对具体网站进行适配。

python复制import json
from bs4 import BeautifulSoup

def parse_next_data(html):
    soup = BeautifulSoup(html, 'html.parser')
    script = soup.find('script', id='__NEXT_DATA__')
    if not script:
        raise ValueError('__NEXT_DATA__ not found')
    
    try:
        data = json.loads(script.string)
        exhibitors = data['props']['pageProps']['dehydratedState']['queries'][0]['state']['data']
        return exhibitors
    except (KeyError, json.JSONDecodeError) as e:
        print(f"解析错误: {str(e)}")
        return None

注意：Next.js的数据结构可能随版本更新而变化，建议先用浏览器开发者工具手动验证数据路径，再编写解析代码。

2.2 JSON内嵌HTML的清洗难题

从__NEXT_DATA__提取出的展商数据中，公司介绍、联系方式等字段经常包含HTML标签。比如：

json复制{
  "company": "ABC Plastics",
  "description": "<div><p>Leading manufacturer of <strong>plastic</strong>